CSS3的幾個標(biāo)簽速記(推薦)

border-radius:CSS3圓角
語法:border-radius:25px;
橢圓邊角:語法-border-radius:xx%;或者15px/100px;
box-shadow:CSS3盒陰影
語法:box-shadow:5px 5px 10px #eee;
border-image:使用圖像創(chuàng)建一個邊框
語法:boder-image:url(xx.xxx) 30 30 round
round是平鋪、stretch是拉伸
background-size:自定義設(shè)置背景圖片的大小
語法:background-size:--px --px;
背景圖片完全填充background-size:100% 100%;
background-origin:指定了背景圖像的位置區(qū)域 border-box padding-box content-box
CSS3允許多個背景圖片:background-image:url(img_flwr.gif),url(img_tree.gif);
CSS3漸變
linear-gradients:線性漸變
語法:background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
使用透明度transparency
語法:linear-gradients(to right,rgb(255,0,0,0),rgb(255,0,0,1));
為了添加透明度,我們使用 rgba() 函數(shù)來定義顏色結(jié)點。rgba() 函數(shù)中的最后一個參數(shù)可以是從 0 到 1 的值,它定義了顏色的透明度:0 表示完全透明,1 表示完全不透明。
radial-gradients:徑向漸變
語法與linear-gradients一樣,這里不重復(fù)。
text-shadow:文本陰影
語法:text-shadow:--px --px --px #eee;
word-wrap:break-word如果某個單詞過長溢出文本框,此標(biāo)簽強制換行
以上這篇CSS3的幾個標(biāo)簽速記(推薦)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
原文地址:http://www.cnblogs.com/zhouliang/archive/2016/07/06/5647213.html
相關(guān)文章
CSS3+DIV實現(xiàn)漂亮的動畫彩色標(biāo)簽
這篇文章主要為大家詳細介紹了CSS3+DIV實現(xiàn)漂亮的動畫彩色標(biāo)簽,鼠標(biāo)移動會有動畫 ,很神奇的動畫效果,感興趣的小伙伴們可以參考一下2016-06-16HTML5 SVG和CSS3實現(xiàn)的表單浮動標(biāo)簽特效源碼
是一段實現(xiàn)了12中非常炫酷的表單浮動標(biāo)簽特效代碼,本段代碼適應(yīng)于所有網(wǎng)頁使用,有興趣的朋友們可以前來下載使用2015-04-10僅6個span標(biāo)簽實現(xiàn)的純CSS3動態(tài)Loading加載特效源碼
今天我們介紹一款實現(xiàn)超級簡單的CSS3進度條動畫,該進度條是條形進度條,僅用了6個span標(biāo)簽和相應(yīng)的CSS3代碼實現(xiàn)了該CSS3條形進度條。呈現(xiàn)出波浪滾動的效果。整體效果動感2014-10-31一款超酷的js+css3實現(xiàn)的3D標(biāo)簽云特效兼容ie7/8/9
一款超酷的js+css3實現(xiàn)的3D標(biāo)簽云特效,兼容ie7/8/9,看慣了flash的,來試試這個吧,下面有個不錯的示例,希望大家不要錯過2013-11-18jQuery+ajax+html5+css3等最新技術(shù)整合的Tab標(biāo)簽欄切換特效
一個功能非常完美的ajax tab切換效果,使用html5、css3,jquery等完成,彩色的tab標(biāo)簽2013-05-13純css3實現(xiàn)的tab標(biāo)簽(無圖片)
用CSS3代碼來寫,非常簡潔,無需圖片配合,只要純代碼即可實現(xiàn),還有更簡潔的么2013-03-27