CSS3新增屬性

2021-08-28 11:04:27 字數 780 閱讀 4076

css3新增屬性:

1.文字和盒子屬性:

1.1 文字陰影屬性:

text-shadow:水平方向 垂直方向 模糊半徑 陰影顏色;

1.2 盒子陰影屬性:

box-shadow: 水平方向 垂直方向 模糊半徑 陰影顏色;

1.3 文字換行:

word-break:break-all //  斷字元

word-warp:break-word // 斷單詞 

white-space:nowrap;   //強制在一行內顯示文字

1.4 文字溢位:

text-overflow:clip;

text-overflow: ellipsis; //多餘部分顯示成省略號

overflow:hidden;  //搭配使用

1.5  圓角:

border-radius:px  50%

2.動畫相關的屬性:

2.1  transform:變形屬性  旋轉  位移  放大  傾斜

rotate(40deg) 旋轉 指定度數  順時針

translate(x,y) 水平方向和垂直方向移動指定距離

scale(2) 放大指定倍數

skewx(40deg) x軸或y軸旋轉指定的度數

2.2  transition:平滑過渡 

transition:過渡操作 時間 過渡效果;

all      2s  ease-in linear;

2.3  animation:自定義動畫

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...