常用CSS3特性

2021-09-27 13:16:12 字數 1418 閱讀 1793

box-shadow:盒子陰影(x軸,y軸,模糊距離,陰影半徑拓展,陰影顏色,inset(內投影))可以分別設定四邊,效能殺手;

text-shadow:字型陰影(x軸,y軸,模糊距離,陰影顏色);

rgba:rgba和opacity區別,只會對當前元素生效;

語法:background:linear-gradient(起始方向,color1,color2……) ;ps:第乙個可以是to left,也可以是deg,顏色可以是rgba格式;

語法:background: radial-gradient((起始位置, 漸變形狀, 漸變範圍, start-color, …, last-color);ps:起始位置為xy軸的座標預設為center,形狀分為ellipse預設橢圓形,circle表示圓形。

漸變都可以使用百分比或者象素給顏色新增漸變距離。

語法:@font-face

background-image:

background-size:尺寸

background-origin:定位區域border-box,padding-box(預設值),content-box

background-clip:裁剪 border-box,padding-box,content-box

border-position:定位

background-repeat:取消重複no-repeat

練手:導航欄

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

* ul

li.last

<

/style>

<

/head>

="warper"

>

home<

/li>

2<

/li>

3<

/li>

4<

/li>

5<

/li>

="last"

>

6<

/li>

<

/ul>

<

/div>

<

/div>

<

/body>

<

/html>```

![在這裡插入描述]

CSS3 常用新特性總結

e first of type 匹配同型別中的第乙個同級兄弟元素e e last of type 匹配同型別中的最後乙個同級兄弟元素e e first child 匹配其父元素的第n個子元素,第乙個編號為1 e last child 匹配其父元素的倒數第n個子元素,第乙個編號為1 e nth chi...

css3特性彙總

設定圓角 border radius 5px 4px 3px 2px 四個半徑值分別是左上角 右上角 右下角和左下角,順時針 設定陰影 box shadow x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色 投影方式 具體每乙個引數如下所示 線性漸變背景 background ima...

css3新增特性

css3屬性選擇器 media all screen print speech only and not min width max width orientation portrait landscape e attr value id value class value e attr value...