css3新增屬性

2022-07-17 14:30:11 字數 1326 閱讀 4426

一、選擇器

1、屬性選擇器:

2、結構性偽類

p:nth-child(odd)/*匹配奇數行*/

p:nth-child(even)/*匹配偶數行*/

p:nth-child(2n)

3、偽類

二、顏色模式

三、文字陰影與描邊

1、文字陰影

光暈效果:color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;

層疊效果:color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;

浮雕效果:color:white; font-size:100px; font-weight:bold; text-shadow:2px 2px 4px #000;

2、文字描邊:只有webkit核心支援

-webkit-text-stroke:寬度 顏色

四、新增文字功能(全相容)

1、direction 定義文字排列方式(全相容)

2、text-overflow 定義省略文字的處理方式

五、自定義字型

CSS3新增屬性用法整理CSS3新增屬性用法整理

css3新增屬性用法整理 css3新增屬性用法整理 1 box shadow 陰影效果 2 border color 為邊框設定多種顏色 3 border image 邊框 4 text shadow 文字陰影 5 text overflow 文字截斷 6 word wrap 自動換行 7 bord...

css3 新增屬性

background origin 背景影象顯示的原點。background clip 規定背景的繪製區域。padding box 從padding區域 含padding 開始顯示背景影象。border box 從border區域 含border 開始顯示背景影象。content box 從cont...

Css3新增屬性

1.新增邊框屬性 box shadow 實現邊框陰影 屬性值有 模糊度 x軸偏移y軸偏移 color 陰影顏色 border radius 實現圓角邊框 屬性值越大角度越大 border image 實現邊框 border image source slice width outset repeat...