CSS3总结
前綴
chrome: -webkit-
safari: -webkit-
friefox:-moz-
opera:-0-
書寫的時候應(yīng)該先用有前綴的樣式，再用無前綴的樣式
?
圓角
border-radius:20px 20px 20px 20px ?? 左上，右上，右下，左下
?
陰影
box-shadow:2px 2px 3px #aaaaaa;
語法
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow ?? ?必需。水平陰影的位置。允許負(fù)值
v-shadow ?? ?必需。垂直陰影的位置。允許負(fù)值
blur ?? ???? ? ??可選。模糊距離
spread ?? ???? 可選。陰影的尺寸
color ?? ???? ? ?可選。陰影的顏色
inset ?? ???? ? ?可選。將外部陰影 (outset) 改為內(nèi)部陰影。
文本陰影
text-shadow:1px 1px #000;? 水平 垂直 顏色
text-shadow:1px 1px .3em #000; 水平 垂直?模糊直徑 顏色
?
徑向漸變
1.語法
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：默認(rèn)為to bottom，即從上向下的漸變；
stop：顏色的分布位置，默認(rèn)均勻分布，例如有3個顏色，各個顏色的stop均為33.33%。
2.示例：to left、top right、to bottom、to top
div { background:linear-gradient(to left, red , blue) }
div { background:linear-gradient(to right, red , blue) }
div { background:linear-gradient(to bottom, red , blue) } /* 瀏覽器默認(rèn)值 */
div { background:linear-gradient(to top, red , blue) }
分別產(chǎn)生“從右到左”、“從左到右”、“從上到下”、“從下到上”的“紅色–綠色”漸變，效果如下圖：
?
3.示例：to right bottom、top right top、top left bottom、top left top
div { background: linear-gradient(to right bottom, red , blue); }
div { background: linear-gradient(to right top, red , blue); }
div { background: linear-gradient(to left bottom, red , blue); }
div { background: linear-gradient(to left top, red , blue); }
分別產(chǎn)生到“右下角”、“右上角”、“左下角”、“左上角”的漸變，效果如下圖：
注意：top right bottom和top bottom right是等同的
4.使用角度
div { background: linear-gradient(10deg, red, blue) }
效果如下圖：
5.多個漸變點(diǎn)
5.1 多個漸變點(diǎn)默認(rèn)均勻分布
div { background: linear-gradient(to right, red, blue, green) }
理論上漸變點(diǎn)數(shù)目不受限制，實(shí)際效果如下圖：
5.2 多個漸變點(diǎn)不均勻分布
div { background: linear-gradient(red 5%, green 15%, blue 60%) }
6.重復(fù)性漸變
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
10%的位置為yellow，20%的位置為green，然后按照這20%向下重復(fù)，效果如下圖：
7.使用rgba
div { background:linear-gradient(to right, rgba(255, 0 ,0, 1), rgba(255, 0 ,0 , 0)) }
從紅色的不透明，到全透明的漸變，效果圖如下：
【參考文章：CSS3 漸變（Gradients）、CSS3 Gradient_gradient, css3屬性詳解】
?
徑向漸變
語法
徑向漸變不同于線性漸變，線性漸變是從“一個方向”向“另一個方向”的顏色漸變，而徑向漸變是從“一個點(diǎn)”向四周的顏色漸變。其語法如下：
background: radial-gradient(center, shape, size, start-color, ..., last-color);
center：漸變起點(diǎn)的位置，可以為百分比，默認(rèn)是圖形的正中心。
shape：漸變的形狀，ellipse表示橢圓形，circle表示圓形。默認(rèn)為ellipse，如果元素形狀為正方形的元素，則ellipse和circle顯示一樣。
size：漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊； farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角
例1：多顏色點(diǎn)均勻分布
div { background: radial-gradient(red, green, blue); }
以中心（50% 50%）為起點(diǎn)，到最遠(yuǎn)角（farthest-corner），從red到green、blue的均勻漸變，效果如下圖：
完整的代碼可以寫成：
div { background: -webkit-radial-gradient(50% 50%, farthest-corner, red, green, blue); }
或
div { background: -webkit-radial-gradient(center, farthest-corner, red, green, blue); }
例2：多顏色節(jié)點(diǎn)不均勻分布
div { background: radial-gradient(red 5%, green 15%, blue 60%); }
例3：設(shè)置漸變形狀
shape 參數(shù)定義了形狀。它可以是值 circle 或 ellipse。其中，circle 表示圓形，ellipse 表示橢圓形。默認(rèn)值是 ellipse。
div { background: radial-gradient(circle, red, yellow, green); }
div { background: radial-gradient(ellipse, red, yellow, green); }
circle：漸變?yōu)樽畲蟮膱A形； ellipse：根據(jù)元素形狀漸變，元素為正方形是顯示效果與circle無異。
例4：不同尺寸的漸變
size指定了漸變的大小，即漸變到哪里停止，它有四個值。 closest-side：最近邊； farthest-side：最遠(yuǎn)邊； closest-corner：最近角； farthest-corner：最遠(yuǎn)角
div { background: radial-gradient(60% 40%, closest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, closest-corner, blue, green, yellow, black); }
div { background: radial-gradient(60% 40%, farthest-corner, blue, green, yellow, black); }
效果圖如下，分別用“紅色”描出了不同屬性指定的漸變終點(diǎn)：
例5：重復(fù)性漸變
repeating-radial-gradient() 函數(shù)用于重復(fù)徑向漸變
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
效果圖如下：
【參考文章：CSS3 漸變（Gradients）、CSS3 Gradient_gradient, css3屬性詳解】
?
選擇器
:nth-child和:nth-of-type都是CSS3中的偽類選擇器
:nth-of-type 限制條件少
p:nth-child(2)? 其渲染的結(jié)果就是父標(biāo)簽的第二個子元素。
p:nth-child(2)? 表示這個元素要是p標(biāo)簽，且是第二個子元素，是兩個必須滿足的條件。
<section>
?? ?<div>我是一個普通的div標(biāo)簽</div>
?? ?<span>我是一個普通的span標(biāo)簽</span>
?? ?<p>我是第1個p標(biāo)簽</p>
?? ?<p>我是第2個p標(biāo)簽</p>? <!-- 希望這個變紅，雖然他是P便簽，可是他并不是父元素的第二個子元素，所以不會變紅-->
</section>
那么p:nth-child(2)將不會選擇任何元素。
p:nth-of-type(2) 表示父標(biāo)簽下的第二個p元素
無論在div標(biāo)簽后面再插入個多少個標(biāo)簽，都是第二個p標(biāo)簽中的文字變紅。
<section>
?? ?<div>我是一個普通的div標(biāo)簽</div>
?? ?<span>我是一個普通的span標(biāo)簽</span>
?? ?<p>我是第1個p標(biāo)簽</p>
?? ?<p>我是第2個p標(biāo)簽</p>? <!-- 希望這個變紅，他會非常堅(jiān)定的變紅 -->
</section>
?
:nth-child 基本用法
:frist-child 選中第一個圓度
:last-child 選中的最后一個元素
:only-child 選中的元素是其父元素的唯一子元素
:nth-last-child(2) 其父元素的第二個子元素的每個 p 元素，從最后一個子元素開始計(jì)數(shù)：
:nth-child(8)
選中第8個子元素
正方向范圍
:nth-child(n+6)
選中從第6個開始的子元素
使用 :nth-child(n+6) ，就相當(dāng)于讓你選中第6個 :nth-child(6) 和其后的所有子元素
負(fù)方向范圍
:nth-child(-n+9)
選中從第1個到第9個子元素
使用 :nth-child(-n+9) ，就相當(dāng)讓你選中第9個和其之前的所有子元素
前后限制范圍
:nth-child(n+4):nth-child(-n+8)
選中第4-8個子元素
使用 nth-child(n+4):nth-child(-n+8) 選中某一范圍內(nèi)子元素，從第4個到第8個子元素
:nth-child(3n+1):nth-child(even) 間隔選擇子元素
使用 :nth-child(3n+1) 我們可以每隔3個選中一個，也就是第 1, 4, 7 和 10 個子元素，但通過使用 :nth-child(even) 過濾掉了奇數(shù)位子元素，也就是 1 和 7，于是，剩下的子元素只有 4 和 10。
:nth-of-type 的用法
:nth-of-type(3)
可以指定相同的子元素類型，然后再選擇。
正方向相同子元素類型范圍
span:nth-of-type(n+3)
div:nth-of-type(2n+2)
使用 span:nth-of-type(n+3) 或 div:nth-of-type(2n+2) ，首先指定是相同的子元素類型，然后在這些類型里選擇...
負(fù)方向相同子元素類型范圍
span:nth-of-type(-n+4)
div:nth-of-type(-n+5)
使用 span:nth-of-type(-n+4) or div:nth-of-type(-n+5) ，首先指定是相同的子元素類型，然后在這些類型里選擇...
前后范圍限制相同子元素類型
span:nth-of-type(n+3):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(-n+3)
使用 :nth-of-type(n+3):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(-n+3) ，首先指定是相同的子元素類型，然后在這些類型里選擇...這個例子中選中的將會是第 1-3 和 3-6 個子元素。
高級相同子類型加前后范圍限制用法
span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6)
div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3)
使用 span:nth-of-type(n+3):nth-of-type(odd):nth-of-type(-n+6) 和 div:nth-of-type(n+1):nth-of-type(even):nth-of-type(-n+3),你既能夠限制是在相同類型子元素里選擇，同時指定選擇的起始位置和結(jié)束位置。這里同時使用了奇偶位限制。
瀏覽器支持
所有主流瀏覽器均支持 :nth-child() 選擇器，除了 IE8 及更早的版本。
【參考文章】
?
子代選擇器和父代選擇器
?然后我們在<style>標(biāo)簽里增加一個子代選擇器
?.mainDiv > div{
??????????? background-color: green;
??????? }
讓子代的背景色都為綠色
修改后保存用瀏覽器打開如圖，可見【兒子】那個div已經(jīng)變?yōu)榫G色
然后我們?nèi)サ糇哟x擇器，添加一個后代選擇器
.mainDiv div{
??????????? background-color: red;
??????? }
讓后代的背景色都為紅色
修改后保存用瀏覽器打開如圖，可見【兒子】和【孫子】的div已經(jīng)變?yōu)榧t色
現(xiàn)在我們再看看把上面的子代和后代樣式都同時應(yīng)用，效果如圖。
經(jīng)過上面的結(jié)果展示，我們能得到結(jié)論。
子代選擇器：只對應(yīng)用對象的直接相應(yīng)子節(jié)點(diǎn)有效。如實(shí)例代碼中的兒子div。
后代選擇器：對應(yīng)用對象內(nèi)的所有相應(yīng)子節(jié)點(diǎn)都有效。如實(shí)例中的兒子div和孫子div。
轉(zhuǎn)載于:https://www.cnblogs.com/leena/p/6123482.html
總結(jié)
- 上一篇： a标签的四种状态
- 下一篇： Html和CSS的关系