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

原创 2013年12月05日 15:59:37

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

css 横向渐变 图片阴影效果 字体模糊效果

(必须加在Table的TD里,如果TD有背景就会遮盖阴影,可以把背景放到外套的表格里去) 背景颜色渐变 横向渐变 style="filter:progid:DXImageTransform....

css3/css2让文字超出段落后省略号显示等效果

1.让文字超出段落后省略号显示 让文字超出段落后省略号显示 .fath{ width: 200px; height: 60px; overflow: hi...

css3文字渐变和阴影、图片边框和边框阴影

文字渐变效果使用background-image+ background-clip + text-fill-color来实现,具体介绍请看点击打开链接 文字阴影使用text-shadow来实现,...

使用CSS3线性渐变(linear-gradient)实现文本波浪线效果

我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受。 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整。 比如你只是想调...
  • iefreer
  • iefreer
  • 2016年03月13日 18:48
  • 9855

HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)

(6)text-align-----文本对齐方式 A、text-align :Left;左对齐 B、text-align :right;右对齐 C、text-align :center;居中 D、te...

使得IE支持CSS3 圆角阴影 渐变

  • 2016年09月23日 09:42
  • 26KB
  • 下载

css3 shadow实现的各种漂亮阴影效果

css3 shadow按钮阴影效果Demo代码,很多漂亮的纯CSS3实现图片的各种阴影效果代码,而且按钮的背景色处理的也挺个性,看上去很舒服,阴影的各类也挺多,下阴影、弧线阴影、立体阴影等,相信有一款...

CSS3中轻松实现渐变效果

渐变可以创建类似于彩虹的效果,低版本的浏览器不的不使开发者用图片来实现,CSS3将会轻松实现网页渐变效果。 background-image: -moz-linear-gradient(...
  • wmwyyx
  • wmwyyx
  • 2015年09月11日 17:12
  • 277
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3实现渐变、阴影、超出指定文本省略号显示等一些效果
举报原因:
原因补充:

(最多只允许输入30个字)