ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5 のいくつかの新しい背景属性とテキスト属性の紹介

HTML5 のいくつかの新しい背景属性とテキスト属性の紹介

黄舟
リリース: 2017-10-23 10:11:54
オリジナル
1870 人が閲覧しました

1. 背景画像の表示:

①background-size: 背景画像のサイズを指定します。

value: ピクセル値、パーセント、自動、カバー、contain

②背景画像の開始位置を指定します。

値:padding-box (デフォルト)、content-box、border-box

③background-clip

値:padding-box、content-box、border-box (デフォルト)

2. HSLA:

新規カラー属性 ;

H: 色相

S: 彩度

L: 明るさ

A: 透明度

3. 新しいグラデーションカラー:

radial-gradient:(*position(deg),color percentage,color percentage);径向渐变
linear-gradient:(*position,color percentage,color percentage);线性渐变
ログイン後にコピー

4. 新しい反射:

-webkit-box-reflect:(direction,offset,color(可线性),url)
ログイン後にコピー

5. MASKS マスク、マスク:

-webkit-mask:(url,repeat,position,size)
ログイン後にコピー

6. カスタム フォント:

@font-face{
  font-family:'iconfont';定义字体名
  src:url(‘iconfont.tff’);加载字体
}
ログイン後にコピー

7. 複数行テキスト省略記号: (合計 4 行の CSS)

-webkit-box-orient:vertical  =>文本垂直显示
-webkit-line-clamp:3  =>显示 3 行文本
display:webkit-box  =>弹性盒模型
overflow:hidden  =>溢出隐藏
ログイン後にコピー

8. テキスト シャドウ: (組み合わせて使用​​できます)

text-shadow : オフセットX、オフセットY、ぼかし距離、色

以上がHTML5 のいくつかの新しい背景属性とテキスト属性の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート