CSS实现描边效果

方法1.<span style="position:absolute;width:150;filter:shadow(color=orange);font-size:45pt;color:yellow">文字</span>
<br/>
<br/>
<br/>
<br/>
<br/>


方法2.<p style="font-size:12px;height:12px;color:white;filter:glow(color=black,strength=1);">
Text
描边字

 

</p>
<br/>
<br/>
<br/>
<br/>
<br/>

方法3.<style type="text/css">
body {
      font:12px "Verdana";
      filter:alpha(style=1,startY=0,finishY=100,startX=100,finishX=100);
      background-color:#3366cc;
}
span {
      position:absolute;
      padding:4px;
      filter:
          Dropshadow(offx=1,offy=0,color=white)
          Dropshadow(offx=0,offy=1,color=white)
          Dropshadow(offx=0,offy=-1,color=white)
          Dropshadow(offx=-1,offy=0,color=white);
}
#english {
      font-size:9px;
}
</style>
<span id="english">This is the prospect of filter - dropshadow.</span>
<br><br>
<br/>
<br/>
<br/>

<span>中文描边效果</span><br>
<br/>
<br/>
<br/>
<br/>
<br/>
我自己在css中的应用:
.font {
          font-family: "新宋体";
          font-size: 12px;
          font-style: normal;
          color: #FFFF00;
          font-weight: normal;
          padding:1px;
          letter-spacing: 2px;
          cursor:hand;
      filter:
          Dropshadow(offx=1,offy=0,color=black)
          Dropshadow(offx=0,offy=1,color=black)
          Dropshadow(offx=0,offy=-1,color=black)
          Dropshadow(offx=-1,offy=0,color=black);
}
<br/>
<br/>
<br/>
<br/>
<br/>

方法4.#text { float:left; color:#C60A12; filter:Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow(offx=-1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=-1,color=#ffffff);}此效果是用css的阴影滤镜来实现,普通的阴影滤镜只会产生一个方向的投影,在这里定义了四个方向的投影,所以产生了描边的效果。


<p style="font-size:12px;height:12px;color:white;filter:glow(color=black,strength=1);">
Text
描边字
</p>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值