CSS文本描边:text-stroke

文本描边:text-stroke

属性及使用说明:text-stroke属性是用来给文本等添加描边效果的css属性,注意:并非标准的css属性,而是Webkit(如:Safar和Chrome)浏览器专有的css扩展属性,为了更好的兼容其他浏览器,通常会配合-webkit-text-stroke和-moz-text-stroke等私有前缀属性一起使用

效果

语法

-webkit-text-stroke:stroke-width color;
-moz-text-stroke:stroke-width color;
或者
-webkit-text-stroke-width:stroke-width;
-webkit-text-stroke-color:color;

属性	描述
stroke-width	规定文本描边的宽度,可以用长度单位(px,em)等来指定
color	描边的颜色,可以是在任何有效的css颜色值

注意:使用-webkit-text-stroke会导致文本的渲染性能下降,特别是当文本内容非常多或者是在移动设备上时,可能会影响到性能和用户体验.

类似方法(四边阴影):
这个方法其实即使通过在文本添加一个阴影,形成一个类似肉眼看上去有描边的一个效果.(注意:但是在一定程度上,效果有差异)

<view class="title">特价</view>

<style>
.title{  //在父级上相对定位
  position: absolute;
  top: 30rpx;
  font-size: 80rpx;
  font-weight: bold;
  color: #CE4031;
  text-shadow: 
    -2px -2px 0 #fff,  /* 左上阴影 */
    2px -2px 0 #fff,  /* 右上阴影 */
   -2px 2px 0 #fff,   /* 左下阴影 */
    2px 2px 0 #fff;   /* 右下阴影 */
}
</style>     

也可以自己通过调整阴影来修改样式.