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