关闭

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

2657人阅读 评论(0) 收藏 举报

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

20.其他类型的渐变
background-image: -webkit-gradient(linear, left top, left bottom, 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%) ; 
21.盒子阴影
-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);

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:127360次
    • 积分:2445
    • 等级:
    • 排名:第17568名
    • 原创:105篇
    • 转载:9篇
    • 译文:0篇
    • 评论:17条
    最新评论