css3新特性總結

2021-09-12 15:36:00 字數 1109 閱讀 1113

一、圓角邊框

border-radius:5px;
二、多背景圖

background: url(img_flwr.gif) right bottom no-repeat, url(*****.gif) left top repeat;
三、顏色和透明度(由原來的rgb到現在的rgba)

background: rgba(0,0,0,.5);
四、多列布局和彈性盒模型

display: flex;
五、盒子的變幻(2d、3d)

transform: translate(50px,100px);//移動

transform: rotate();//旋轉

transform: scale();//縮放

transform: skew();//傾斜

用於元素的直接或者滑鼠感應變化,沒有其他變幻引數(如延時,持續時間,變幻曲線),立即改變。

六、過渡和動畫

transition: width 1s linear 2s;
過渡效果,transition通過指定某些屬性和變幻引數,以原始定義為開始狀態,通過滑鼠操作變化(hover),hover狀態定義結束狀態,實現過渡效果。

animation: myfirst 5s;

@keyframes myfirst

25%

50%

100%

}

動畫效果,加強版的過渡效果,通過animation指定動畫名和動畫引數,@keyframes定義動畫內容,根據引數自動觸發。

七、引入web字型(在伺服器端儲存)

@font-face 

div

八、**查詢

body

@media screen and (max-width: 480px)

九、陰影

h1 

div

CSS3新特性總結

1.屬性選擇器 常用的簡單歸納下 attribute value 用於選取帶有指定屬性和值的元素。title w3school attribute value 包含指定詞彙的元素。後代選擇器 title hello attribute value 用於選取帶有以指定值開頭的屬性值的元素,該值必須是整...

css3新特性總結

一 圓角邊框 border radius 5px 二 多背景圖 background url img flwr.gif right bottom no repeat,url gif left top repeat 三 顏色和透明度 由原來的rgb到現在的rgba background rgba 0,...

css3新特性總結

選擇器 last child 選擇元素最後乙個孩子 first child 選擇元素第乙個孩子 nth child 1 按照第幾個孩子給它設定樣式 nth child even 按照偶數 nth child odd 按照奇數 disabled 選擇每個禁用的e元素 checked 選擇每個被選中的e...