1.實現(xiàn)邊框圓角 ：border-radius:5px

2.實現(xiàn)文字陰影 ：text-shadow: .1em .1em .1em  #aaa  帶有模糊效果的陰影
                 text-shadow: 3px 3px #aaa

text-shadow:-1px -1p x white,1px 1px #333立體文本特效

text-shadow：1px 1px white,-1px -1px #444凹體文本特效

text-shadow：-1px 0 black,0 1px black,1p x 0 black,0 -1px back;文本描邊特效

text-shadow：0 0 .2em #F87,0 0 .2em #F87;文本外發(fā)光特效

3.超出部分顯示省略號：width:60px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

4.文本換行顯示

line-break:控制日文換行
word-wrap：break-word；強制換行（對長串的英文不起作用）
word-break：break-all；允許亞洲語言文本行的任意字段斷開
word-break：keep-all；中午、韓文、日文中不允許字斷開
white-space：nowrap；強制在同一行內(nèi)顯示所有文本

在IE瀏覽器下，使用Word-wrap：break-word；聲明可以確保所有文本正常顯示

在Firefox瀏覽器下，中文不會出現(xiàn)任何問題，英文語句也不會出現(xiàn)問題，但是長串英文會出現(xiàn)問題，為了解決長串英文的問題，一般將word-wrap：break-word；和word-break：break-all；聲明結(jié)合使用。但是，這種方法會導致普通英文語句中的單詞被斷開顯示（在IE下也是）

解決長串英文被斷開的問題，使用word-wrap：break-word；overflow：hidden;

5.直線漸變：

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red)) 藍色向紅色漸變

background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(50%,green)) 藍色到綠色再到紅色漸變顯示

6.徑向漸變

background: -webkit-gradient(radial,200 100,10,200 100,100,from(red),to(green))

同心圓，圓心坐標為（200，100），內(nèi)圓半徑為10，外圓半徑為100，從內(nèi)圓紅色到外圓綠色徑向漸變，超出外圓半徑顯示為綠色，內(nèi)圓顯示紅色

7.氣泡效果

background: -webkit-gradient(radial,180 80，10，200，100，90，F(xiàn)rom(#00c),to(rgba(1,159,98,0)),color-stop(98%,#OCF));

其他類型的漸變

盒子陰影

-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

box-shadow: 0 1px 2px rgba(0, 0, 0, .2);

以上這篇css3實現(xiàn)漸變、陰影、超出指定文本省略號顯示等一些效果實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論