CSS3新特性與選擇器

2021-07-11 12:00:19 字數 2341 閱讀 5537

圓角效果:

border-radius:10px; /* 所有角都使用半徑為10px的圓角 */     

border-radius: 5px 4px 3px 2px; /* 四個半徑值分別是左上角、右上角、右下角和左下角,順時針 */ 

陰影:

box-shadow: x軸偏移量 y軸偏移量 [陰影模糊半徑] [陰影擴充套件半徑] [陰影顏色] [投影方式];

陰影顏色:預設黑色; 投影方式:inset時為內部陰影,省略為外部陰影

為邊框應用:

border-image:url(borderimg.png) 70 repeat

rgba顏色:

background-color:rgba(100,120,60,0.5);

最後的0.5**透明度

漸變色彩:

css3 gradient 分為線性漸變(linear)和徑向漸變(radial)。

線性漸變:linear-gradient(to left, red, orange);   to left為漸變方向從右到左;to top;to right;to bottom;to top left;to top right  顏色可多個分別為從起始到終止的色彩。

溢位省略:

text-overflow:ellipsis;    溢位文字以省略號出現,需要下面三個屬性同時使用

text-overflow:ellipsis; 

overflow:hidden; 

white-space:nowrap; 

嵌入字型:

@font-face能夠載入伺服器端的字型檔案,讓瀏覽器端可以顯示使用者電腦裡沒有安裝的字型。

@font-face

使用時:font-family:字型名稱

文字陰影text-shadow:

text-shadow: x-offset(水平偏移) y-offset(垂直偏移) blur(陰影的模糊程度,其值不能是負值,如果值越大,陰影越模糊,反之陰影越清晰) color;

background-origin : border-box | padding-box | content-box;

引數分別表示背景是從邊框,還是內邊距(預設值),或者是內容區域開始顯示。如果背景不是no-repeat,這個屬性無效,它會從邊框開始顯示。

background-clip : border-box | padding-box | content-box | no-clip

引數分別表示從邊框、或內填充,或者內容區域向外裁剪背景。no-clip表示不裁切,和引數border-box顯示同樣的效果。

background-size設定背景的大小

以長度值或百分比顯示,還可以通過cover和contain來對進行伸縮。background-size: auto | 《長度值》 | 《百分比》 | cover | contain

css3選擇器:

屬性選擇器:e[attr^="val"] 屬性attr值以val開頭的e元素  e[attr$="val"] 屬性attr值以val結尾的e元素  e[attr*="val"] 屬性attr值包含val的e元素

結構性偽類選擇器     

「:root」選擇器等同於元素

:not選擇器稱為否定選擇器,和jquery中的:not選擇器一模一樣,可以選擇除某個元素之外的所有元素。input:not([type="submit"])

:empty選擇器表示的就是空。用來選擇沒有任何內容的元素,這裡沒有內容指的是一點內容都沒有,哪怕是乙個空格。 p:empty

「:first-child」選擇器表示的是選擇父元素的第乙個子元素的元素e。簡單點理解就是選擇元素中的第乙個子元素,記住是子元素,而不是後代元素

:last-child」選擇器與「:first-child」選擇器作用類似,不同的是「:last-child」選擇器選擇的是元素的最後乙個子元素。

「:nth-child(n)」「:nth-last-child(n)」選擇器和前面的「:nth-child(n)」選擇器非常的相似,只是這裡多了乙個「last」,所起的作用和「:nth-child(n)」選擇器有所區別,從某父元素的最後乙個子元素開始計算,來選擇特定的元素。

CSS3新特性(二)選擇器

一 基礎選擇器 1 通配選擇器 2 元素選擇器e 3 id選擇器 id 4 class.class 5 群組選擇器e,f 二 層次選擇器 1 後代選擇器e f 2 子選擇器e f 3 相鄰選擇器e f 4 通用兄弟選擇器e f 三 屬性選擇器 1 e attr 選擇具有att屬性的e元素 2 e a...

css3的新特性選擇器 屬性選擇器

自己學css的時候比較亂,這次趁著複習把css3的新特性選擇器和css2以前不怎麼用的選擇器做乙個總結 div id parent p i m a example p p id one i m a example p p i m a example p p i m a example p p i m...

總結CSS3新特性 選擇器篇

css3新增了 p p選擇該屬性以特定值開頭的元素 選擇該屬性以特定值結尾的元素 選擇該屬性 現了特定值的元素 上邊三個是可以組合使用的,方法如 實際中可以應用在區分本地鏈結與外部鏈結,通過判斷是否有http com什麼的 等到css4選擇器問世就不用這麼麻煩了 local link 從字面大概能看...