`
davice_li
  • 浏览: 90947 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

CSS实现描边效果

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>

 

分享到:
评论

相关推荐

    用css滤镜实现的文字描边效果的代码

    用css滤镜实现的文字描边效果的代码 在CSS中,实现文字描边效果可以通过使用滤镜来实现。滤镜(Filter)是CSS的一个属性,它可以对元素应用视觉效果。下面我们将详细介绍如何使用CSS滤镜实现文字描边效果。 首先,...

    纯CSS3代码实现文字描边

    CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果,本文给大家介绍纯CSS3代码实现文字描边,需要的朋友参考下

    使用CSS3实现SVG路径描边动画效果入门教程

    不依赖javascript,直接使用纯css实现 svg 的描边绘制动画效果,效果演示动画。 基础知识: SVG中有个比较重要的属性分支 stroke ,中文软件中称为“描边”。和stroke相关的属性还有下面这些: 1、 stroke 表示...

    CSS3实现文字描边的2种方法(小结)

     最近遇到一个需求,需要实现文字的描边效果,如下图  解决方法一  首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke  该属性是一个复合属性,可以设置文字宽度和文字描边颜色  该属性使用...

    svg图形描边,通过html5标签实现六边形描边动画

    通过html5标签实现六边形描边动画。通过导入动画插件,获取图形路径放入标签。添加css动画效果实现。

    CSS3实现漂亮的迷你立体阴影效果的导航条

    CSS3实现网页特效,在不支持CSS3属性的浏览器下亦可观看,只是少了描边阴影效果

    CSS3 SVG镂空效果图标按钮.zip

    CSS3 SVG镂空效果图标按钮是一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错。

    anime.js 实现带有描边动画效果的复选框(推荐)

    它与CSS,个别变换,SVG,DOM属性和JS对象。 特征 具体的动画参数 具体目标值 多个定时值 播放控制 运动路径 在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用。正确使用动画,不但可以有助于用户...

    纯CSS3圆角按钮

    目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果,本实例就是一款直接用CSS3实现的,无需其他任何JS或者flash、亦不需任何...

    CSS3/SVG质感背景小图标 镂空效果图标按钮

    之前我们分享过很多利用CSS3制作的图标小按钮,比如一些分享按钮,如纯CSS3社会化分享...今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错。

    css效果之边框内圆角

    本文主要介绍了css效果之边框内圆角,分享给大家,也给自己留个笔记,具体如下: 效果如下 你可能想到的方法 padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; 如果采用上面的方式,会产生一个与...

    利用CSS3的text-shadow属性设计网页艺术字特效

    利用CSS3新增的text-shadow属性可以生成文本阴影,在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果,大大提高开发效率,无需链接图片文件,节约带宽。

    炫光特效,模拟迁徙效果的echarts

    echarts最新的版本中这种炫酷的效果实现起来比较麻烦,这个资源里是html和js都有,直接点击index.html就可以看到效果,可以无缝对接到项目里。 炫光特效,模拟迁徙效果

    css 网页虚线制作方法剖析

    (一)设计中实现虚线  总结以下photoshop画虚线的几种方法(只讨论直线): (1)使用画笔—点击“画笔笔尖形状”,调整“间距”   这种方法简便,制作出的虚线点分布均匀,通过描边路径可以画出任意形状的虚线...

    JavaScript网页特效范例宝典源码

    实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...

    Photoshop CSS网页制作的背景图 主题的引用样式

    如何实现这样的效果呢? 首先,要准备一张这样的图片: 如何做出这样的图片呢? 一、打开Photoshop,新建一个640×480像素的文档 二、新建图层,按D键将前景色和背景色恢复为前黑后白,再按X键交换前景色和背景...

    HTML5 Canvas核心技术 图形、动画与游戏开发

    427 10.2 进度条控件 433 10.3 滑动条控件 437 10.4 图像查看器控件 446 10.5 总结 454 第11章 移动平台开发 455 11.1 移动设备的视窗 456 11.2 媒体特征查询技术 461 11.2.1 媒体特征查询与css 461 11.2.2...

Global site tag (gtag.js) - Google Analytics