css3基礎選擇器邊框與圓角背景與漸變

css3選擇器相關：

section > div直接子元素選擇器

div + article相鄰兄弟選擇器（在元素之後出現）

div ~ article通用兄弟選擇器（在元素之後出現）

屬性選擇器：

a[href] 
a[href="#"] 
/*包含two且屬性值用空格分隔：*/
a[class~="two"] 
/*屬性的第乙個值以#開頭：*/
a[href^="#"] 
/*以#結尾：*/
a[href$="#"] 
/*包含#：*/
a[href*="#"] 
/*第乙個屬性值以#-開頭：*/
a[href|="#"]

ui元素偽類：

input:disabled

input:enabled

input:checked

div:first-child匹配屬於其父元素的第1個子元素且是div，計數時不分型別，顯示時分型別

div:last-child匹配屬於其父元素的最後1個子元素且是div，計數時不分型別，顯示時分型別div:nth-child(2) 匹配屬於其父元素的第n個子元素且是div，計數時不分型別，顯示時分型別div:nth-lat-child(2) 匹配屬於其父元素的第n個子元素且是div，計數時不分型別，顯示時分型別

n匹配下標，從0開始計算：

li:nth-child(2n) 雙數

li:nth-child(2n+1) 單數

li:nth-child(n+4)

li:nth-child(odd) 奇數，下標從1開始計算

li:nth-child(even) 偶數，下標從1開始計算

li:nth-last-child(3) 倒數第3個

article:only-child 屬於父元素的唯一元素，且是article(沒有任何其他子元素)

div:nth-of-type(2) 匹配屬於其父元素的第2個子元素且是div，計數時分型別

div:nth-last-of-type(2)

div:first-of-type div:last-of-type

article:only-of-type 屬於父元素的唯一article元素（可以有其他型別的子元素）

div:empty 沒有子元素的div元素（包括文字也沒有）

a:not(:last-of-type) 不是最後乙個a子元素

id選擇器權重大於屬性選擇器

.red > [class=」red」]

css偽元素：

div::selection 文字被選中後的樣式

::-moz-selection 火狐

css3邊框與圓角：

四個值按照順時針方向來

border-radius相容性寫法：

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;

box-shadow水平偏移垂直偏移模糊擴充套件顏色內部

box-shadow: 50px 30px 0px 0px yellow inset;

border-image-repeat:stretch（拉伸）/repeat（重複）/round（鋪滿）/initial/inherit

border-image-slice: 50%;/*影象邊界向內偏移*/

border-image-width: 50%;/*影象邊界的寬度*/

border-image-outset: 2; /*在邊框外部繪製*/

border-image-repeat: repeat;

css3背景與漸變：背景繪製區域（顯示範圍）

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;

背景影象定位（起始位置，原點位置，與偏移搭配使用）

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-position:10px 10px; /*與偏移搭配使用*/

background-size只寫乙個值，第二個預設是auto，根據比例等比縮放

background-size: contain; /*等比縮放到某一邊達到容器邊緣*/
background-size: cover;/*等比縮放填滿容器*/
background-size: 800px 500px;
background-size: 800px;
background-size: 50% 50%;
background-size: 50%;
background-size: 100% 100%;
background-size: 100%;

background-image多重背景，前面的會覆蓋後面的

預設從上到下漸變：

div

從左到右漸變

div

左上角開始的對角線漸變

div

角度控制方向

角度漸變是水平線和漸變線之間的角度，0deg是從下到上，90度是從左到右

div

漸變具體位置控制

div

透明色漸變

div

重複漸變

div

徑向漸變，從內到外

div

圓形漸變

div

橢圓形漸變

div

漸變從圓心到最近邊

div.closest-side

漸變從圓心到最遠邊

div.farthest-side

漸變從圓心到最近角

div.closest-corner

漸變從圓心到最遠角

div.farthest-corner

ie漸變從上到下

div

ie漸變從左到右

div

demo：

doctype html

html

lang

="en"

head

CSS3邊框與圓角

border radius屬性 box shadow屬性屬性值描述h shadow 設定陰影在水平方向上的偏移量 v shadow 設定陰影在豎直方向上的偏移量 blur 設定由陰影的邊框往陰影內部x長度進行漸變，x為blur的值 spread 設定原本的陰影圖案往上下左右四個方向分別擴充套件x長...

CSS3邊框與圓角

乙個最多可指定四個border radius屬性的復合屬性，這個屬性允許你為元素新增圓角邊框！語法 border radius 1 4 length 1 4 length 相容性 ie9 firefox4 chrome safari5 opera 四個值左上，右上，右下，左下三個值左上，右上和...

CSS3學習，常用常記（邊框，圓角，背景）

用 css3，你可以建立圓角邊框，新增陰影框，並作為邊界的形象而不使用設計程式，如 photoshop。divcss3 中的 box shadow 屬性被用來新增陰影 divdiv round stretch css圓角製作器使用 css3 border radius 屬性，你可以給任何元素製作 ...

css3基礎 選擇器 邊框與圓角 背景與漸變

CSS3邊框與圓角

CSS3邊框與圓角

CSS3學習，常用常記（邊框，圓角，背景）

相關推薦

css3基礎選擇器邊框與圓角背景與漸變