圓角效果:
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 從字面大概能看...