CSS3文字描边 CSS3字体外部描边
2016-03-16 17:26
711 查看
给需要实现文字描边的元素添加如下CSS3的属性
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
*filter: Glow(color=#000, strength=1);
实现前效果:
实现后效果:
语法详解:
text-shadow:向文本设置阴影。
text-shadow:color||length||length||opacity。
color:指定颜色。
length:第一个length指定阴影在水平方向上的延伸距离,第二个length指定阴影在垂直方向上的延伸距离,可以为负值。
opacity:指定阴影模糊效果的作用距离。
用逗号分隔的4个属性值代表的方向顺序为右下左上。
为了兼容多浏览器而加上前缀-webkit-和-moz-。
filter:滤镜。
filter:Glow 添加光辉晕圈效果在元素对象的边外。
filter:Glow(color=颜色值,strength=数值)。
color:指定晕圈发光效果的颜色。
strength:指定晕圈发光的强度范围,参数值从1到255。
来源: 谢斌个人博客, CSS3文字描边 CSS3字体外部描边。
转载请以链接形式标明本文地址!本文地址:http://www.xb02.com/article/8/
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
*filter: Glow(color=#000, strength=1);
实现前效果:
实现后效果:
语法详解:
text-shadow:向文本设置阴影。
text-shadow:color||length||length||opacity。
color:指定颜色。
length:第一个length指定阴影在水平方向上的延伸距离,第二个length指定阴影在垂直方向上的延伸距离,可以为负值。
opacity:指定阴影模糊效果的作用距离。
用逗号分隔的4个属性值代表的方向顺序为右下左上。
为了兼容多浏览器而加上前缀-webkit-和-moz-。
filter:滤镜。
filter:Glow 添加光辉晕圈效果在元素对象的边外。
filter:Glow(color=颜色值,strength=数值)。
color:指定晕圈发光效果的颜色。
strength:指定晕圈发光的强度范围,参数值从1到255。
来源: 谢斌个人博客, CSS3文字描边 CSS3字体外部描边。
转载请以链接形式标明本文地址!本文地址:http://www.xb02.com/article/8/
相关文章推荐
- css 当用id选择器与 class 选择器选择同一目标但是应用不同修饰时的选择问题
- CSS之弧形阴影
- CSS之弧形阴影
- Html+Css JavaEE highChart使用指南:
- CSS样式简单设置
- CSS的Position tatic,relative,absolute,fixed。
- 在不同的浏览器下FORM及它的小伙伴们默认样式的CSS属性值是不完全一致
- 6、CSS基础 part-4
- 关于CSS浮动float属性的了解及清除浮动的方式
- CSS3新特性学习
- Retina视网膜屏中CSS3边框图片像素虚边的问题
- css3d总结
- 神奇!js+CSS+DIV实现文字颜色渐变效果
- AlertDialog常用的一些样式
- js兼容性之css的float
- css布局的相关几个难点
- 5、CSS基础part-3
- 轻松搞定各版本IE兼容问题,IE6,IE7,IE8,IE9,IE10,IE11
- (一)css代码积累——自己经常忘记,但是总记不住的代码
- CSS图片链接、映射