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));

其他类型的渐变

CSS Code复制内容到剪贴板

background-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(255,255,255,0.6) ), color-stop(50%, rgba(255,255,255,0.2) ),color-stop(51%, rgba(255, 255, 255, 0) ), to(rgba(255, 255, 255, 0) ));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%);
background-image: linear-gradient(top, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0) 100%) ;