| 666 | 666 | 666 | 666 | 666 |
|---|---|---|---|---|
| 前綴 | -webkit | -moz | -ms | -o |
| 瀏覽器 | chrome和safari | firefox | IE | opera |
CSS3基礎(chǔ) -- 邊框
- 圓角效果 向元素添加圓角邊框
border-radius:10px;//所有角都為10px（還可以使用百分比 兼容性不好）
border-radius:5px 4px 3px 2px;//四個(gè)半徑值 分別為 左上角 右上角 右下角 左下角
- 陰影 box-shadow 向盒子添加陰影。支持一個(gè)或者多個(gè)
box-shadow: X軸偏移量 Y軸偏移量 [陰影模糊半徑] [陰影擴(kuò)展半徑] [陰影顏色] [投影方式];
border-image:url 待定
background-image:linear-gradient(to top left,red , orange,yellow); 漸變色 顏色無限
- to top 由下到上
- to right 由左到右
- to bottom 由上到下
- to left 由右到左
- to top left 右下角到左上角
- to top right 左下角到右上角
屬性選擇器
- E[att^="val"] -- a[class^=icon] // 匹配icon開頭的
- E[att
=pdf] // 匹配pdf結(jié)尾的
- E[attr="val"] -- a[class=more] // 匹配包含more的
結(jié)構(gòu)性偽類選擇器
- :root 根選擇器 （相當(dāng)于 html { background:range }）
- :not 否定選擇器（選擇除某個(gè)元素之外的所有元素）
div:not([id="footer"]){
background: orange;
}
- :emply 選擇器表示的就是空沙热，用來選擇沒有任何內(nèi)容的元素
div:empty{
border: 1px solid green;
}
- target 迷迷糊糊
- :first-child 選擇父元素的第一個(gè)子元素的元素E。
- :first-of-type 類似 需要指定類型
- :last-child 選擇父元素的最后一個(gè)子元素的元素E口注。
- :last-of-type 類似 需要指定類型
ul > li:first-child {
color:red;
}
/*我要改變第一個(gè)段落的背景為橙色*/
.wrapper > p:first-of-type {
background: orange;
}
ul > li:last-child {
border-bottom: none;
}
- :nth-child(n) 選擇器用來定位某個(gè)元素的一個(gè)或多個(gè)特定的子元素。 （奇偶數(shù)）
- :nth-of-type(n) 同上 指定某種類型子元素
- :nth-last-child(n) 類似 倒序
- :nth-last-of-type(n) 同上 指定某種類型子元素
// 當(dāng)參數(shù)為數(shù)值時(shí)君珠，從1開始寝志，為表達(dá)式時(shí)，從0開始策添。
ol > li:nth-child(2n+1){
background: green;
}
.wrapper > p:nth-of-type(2n){
background:orange;
}
// 倒序
ol > li:nth-last-child(2n){
background: orange;
}
- :only-child 匹配的元素的父元素中僅有一個(gè)子元素材部，而且是一個(gè)唯一的子元素。
- :only-of-type”是表示一個(gè)元素他有很多個(gè)子元素唯竹，而其中只有一種類型的子元素是唯一的
選擇器
- :enabled 選擇器 可用
- :disabled 選擇器 不可用 需要在表單元素的HTML中設(shè)置“disabled”屬性乐导。
input[type="text"]:enabled {
border: 1px solid #f36;
box-shadow: 0 0 5px #f36;
}
- :checked 選中狀態(tài)
- :read-only選擇器 只讀模式
- :read-write 選擇器 非只讀模式
變形
- rotate() 旋轉(zhuǎn)
- skew(x,y) 水平垂直同時(shí)扭曲 一個(gè)參數(shù)即為水平方向
- scale(x,y) 水平垂直同時(shí)縮放
- scaleX(x) 水平縮放
- scaleY(y) 垂直縮放
- translate() 位移
translateX()
translateY()
.wrapper span{
transform:ratate(80deg);
}
.wrapper span{
transform:skew(80deg,60deg);
}
- transform-origin: top right; 原點(diǎn)變形
布局
- columns 多列布局
- column-width 多列布局
