漸變
線性漸變
默認(rèn)寫法洪鸭，不加前綴氮惯，要在方向前面加to绍刮，順序從右向左
兼容寫法，不能在方向前加to语淘，順序是從左向右
background: -webkit-linear-gradient(0deg ,blue 50px,green 60px,red 110px);代表藍(lán)綠過渡效果在50到80之間
repeating代表是重復(fù)的
當(dāng)設(shè)置度數(shù)時(shí)background: linear-gradient(0deg,blue,green,red); 默認(rèn)從下往上
background: -webkit-linear-gradient(0deg,blue,green,red);默認(rèn)從左往右
-
當(dāng)什么都不設(shè)置的話诲宇，加不加前綴都是從上往下
以下是代碼及運(yùn)行結(jié)果
.item{
width: 200px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px;
color: white;
text-align: center;
font-size: 50px;
line-height: 200px;}
.item1{
background: linear-gradient(blue,green,red);
}
5F9DABB3-65B4-48ED-8B9F-2DE582705A86.png
.item2{
background: -webkit-linear-gradient(blue,green,red);
}
2037120D-4770-4DCE-9281-88338E951F36.png
.item4{
background: -webkit-linear-gradient(top left,blue,green,red);
}
F8825C8E-B07E-4C56-A6C6-D3D99393D824.png
.item3{
background: -webkit-repeating-linear-gradient(0deg ,blue 70px,green 80px,red 90px);
}
120438D8-382E-4A26-A7D7-A1B5D5944CAB.png
徑向漸變
- 不能確定角度，圓的旋轉(zhuǎn)無意義100px代表半徑
- 可以指定方向惶翻，如top
- 在長方形內(nèi)姑蓝，徑向漸變是橢圓，可以添加circle屬性變成圓形
- 其他和線性漸變類似
以下是例子
.item5{
background: -webkit-radial-gradient( red 30px,orange 40px,yellow 50px,green 60px,cyan 70px,blue 80px,purple 90px)
}
3644FEB8-BA70-421A-8448-BC628CB1C3C8.png
.item6{
background: -webkit-radial-gradient(top, red 30px,orange 40px,yellow 50px)
}
D7BF9B8D-692C-4107-BDEB-6C56700C2220.png
.item7{
background: -webkit-repeating-radial-gradient( red 30px,orange 40px)
}
E91BAC9C-9D0C-4211-9D04-B7AE8984E0EE.png
.item8{
width: 420px;
background: -webkit-repeating-radial-gradient(circle, red 30px,orange 40px)
}
E8421EE8-E87C-4C11-B515-8716A0FE8F27.png
.item9{
/* width: 420px; */
background: -webkit-radial-gradient(circle, red 70%,orange 71%)
}
D21A0F4B-F3A4-47B9-8911-47A14D876CE6.png
選擇器
子代選擇器
div>p 子代選擇器 選擇的是直接子集吕粗，如例所示：選擇的是p標(biāo)簽纺荧，父級(jí)是div的p的標(biāo)簽
兄弟毗鄰選擇器
div+p 兄弟毗鄰選擇器，緊跟在div后面的p標(biāo)簽 颅筋，中間不能有其他標(biāo)簽
后面的所有p選擇器
div ~p 跟在div后面的所有p標(biāo)簽虐秋，同級(jí)
屬性選擇器
- p[title]{}帶有title屬性的p標(biāo)簽
- p[title]{}帶有title屬性的p標(biāo)簽且title屬性值為s1的p標(biāo)簽
- p[title*=s]{}title 屬性包含s的屬性
- p[title$=text]{}title屬性必須有text結(jié)尾的p標(biāo)簽
- p[title^=text]{}title屬性必須有text開頭的p標(biāo)簽
偽類選擇器
- p:nth-child(1)在同級(jí)里面，找到第一個(gè)p標(biāo)簽垃沦，并且是p標(biāo)簽，然后賦值樣式
- p:first-child{};第一個(gè)p標(biāo)簽
- p:last-child{};最后一個(gè)p標(biāo)簽
- p:only-child{};p標(biāo)簽只有一個(gè)時(shí)候不能有同級(jí)元素用押，獨(dú)生子
- p:nth-of-type(){}順序只會(huì)看p標(biāo)簽順序肢簿，不管其他標(biāo)簽;
- p:first-of-type{};第一個(gè)p標(biāo)簽
- p:last-of-type{};最后一個(gè)p標(biāo)簽
- p:only-of-type{};選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素
- p:nth-last-of-type(n){};最后第n個(gè) p標(biāo)簽
- input:checked{}被選中的復(fù)選框，或者單選框
- p:first-letter對(duì)首字母進(jìn)行設(shè)置
- p:first-line對(duì)首行進(jìn)行設(shè)置
