Css3新增屬性

2021-08-05 20:05:52 字數 1829 閱讀 9396

1.新增邊框屬性

box—shadow【實現邊框陰影】

屬性值有  :模糊度   x軸偏移y軸偏移 color 陰影顏色

border—radius【

實現圓角邊框】

屬性值越大角度越大

border—image【實現邊框】

border-image: source slice width outset repeat;

2.新的多列布局

column-count 指定需要分割的列數

column-gap 指定列與列間的間隙

column-rule-width指定兩列的邊框厚度 還有顏色樣式。。

column-span 指定元素是否跨越所有列

column-width指定列的寬度

3.顏色屬性

rgba(red,alpha)

相對於rgb顏色表示法,新增了乙個透明通道。

alpha該透明通道取值為0--1,值越大,越不透明

opacity:0--1

表示透明度。該取值越大,越不透明。

該屬性具有繼承性

4.漸變屬性

1>線性漸變

/*

方向性漸變這是向右可以向左上下啊線性漸變

*/background:linear-gradient(to right,yellow,red,green,blue,violet);

如果想要在漸變的方向上做更多的控制,可以定義乙個角度,而不用預定義方向(to bottom、to top、to right、to left、to bottom right,等等)。

2>徑向漸變

/*徑向漸變的樣式是由度數來決定的 表示式xxdeg

*/

background: linear-gradient(45deg,yellow,red,green,blue,violet);
5.背景新增屬性

background-image      新增多張功能,每張以」 , 「隔開

background-repeat     新增兩個屬性值,

background-position可以對於 top|right|bottom|left進行定位調整

background-origin     從盒子模型不同區域開始顯示背景

background-clip     從盒子模型不同區域開始裁剪背景

background-size      用長度值指定背景大小,不允許負值

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新增屬性

css3新增屬性 1.文字和盒子屬性 1.1 文字陰影屬性 text shadow 水平方向 垂直方向 模糊半徑 陰影顏色 1.2 盒子陰影屬性 box shadow 水平方向 垂直方向 模糊半徑 陰影顏色 1.3 文字換行 word break break all 斷字元 word warp br...