css3实现渐变、阴影、超出指定文本省略号显示等一些效果实例

1.实现边框圆角 ：border-radius:5px

2.实现文字阴影 ：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;文本外发光特效

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；强制在同一行内显示所有文本

在IE浏览器下，使用Word-wrap：break-word；声明可以确保所有文本正常显示

在Firefox浏览器下，中文不会出现任何问题，英文语句也不会出现问题，但是长串英文会出现问题，为了解决长串英文的问题，一般将word-wrap：break-word；和word-break：break-all；声明结合使用。但是，这种方法会导致普通英文语句中的单词被断开显示（在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），内圆半径为10，外圆半径为100，从内圆红色到外圆绿色径向渐变，超出外圆半径显示为绿色，内圆显示红色

7.气泡效果

background: -webkit-gradient(radial,180 80，10，200，100，90，From(#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实现渐变、阴影、超出指定文本省略号显示等一些效果实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持程序员之家。

最新评论