方法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中,实现文字描边效果可以通过使用滤镜来实现。滤镜(Filter)是CSS的一个属性,它可以对元素应用视觉效果。下面我们将详细介绍如何使用CSS滤镜实现文字描边效果。 首先,...
CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果,本文给大家介绍纯CSS3代码实现文字描边,需要的朋友参考下
不依赖javascript,直接使用纯css实现 svg 的描边绘制动画效果,效果演示动画。 基础知识: SVG中有个比较重要的属性分支 stroke ,中文软件中称为“描边”。和stroke相关的属性还有下面这些: 1、 stroke 表示...
最近遇到一个需求,需要实现文字的描边效果,如下图 解决方法一 首先想到去看CSS3有没有什么属性可以实现,后来被我找到了text-stroke 该属性是一个复合属性,可以设置文字宽度和文字描边颜色 该属性使用...
通过html5标签实现六边形描边动画。通过导入动画插件,获取图形路径放入标签。添加css动画效果实现。
CSS3实现网页特效,在不支持CSS3属性的浏览器下亦可观看,只是少了描边阴影效果
CSS3 SVG镂空效果图标按钮是一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错。
它与CSS,个别变换,SVG,DOM属性和JS对象。 特征 具体的动画参数 具体目标值 多个定时值 播放控制 运动路径 在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用。正确使用动画,不但可以有助于用户...
目前CSS3的应用已经越来越普及了,它最常见的一个圆角功能非常的不错,可以省略掉不少图片从而直接用代码实现按钮的渐变、描边、阴影等效果,本实例就是一款直接用CSS3实现的,无需其他任何JS或者flash、亦不需任何...
之前我们分享过很多利用CSS3制作的图标小按钮,比如一些分享按钮,如纯CSS3社会化分享...今天我们来分享一款用CSS3和SVG实现的质感背景小图标,鼠标滑过图标时出现镂空的效果,并且有质感背景的描边,效果非常不错。
本文主要介绍了css效果之边框内圆角,分享给大家,也给自己留个笔记,具体如下: 效果如下 你可能想到的方法 padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; 如果采用上面的方式,会产生一个与...
利用CSS3新增的text-shadow属性可以生成文本阴影,在HTML文档中实现多重阴影特效、火焰特效、发光特效、凸起和镶嵌特效、描边特效和阴影特效的艺术字效果,大大提高开发效率,无需链接图片文件,节约带宽。
echarts最新的版本中这种炫酷的效果实现起来比较麻烦,这个资源里是html和js都有,直接点击index.html就可以看到效果,可以无缝对接到项目里。 炫光特效,模拟迁徙效果
(一)设计中实现虚线 总结以下photoshop画虚线的几种方法(只讨论直线): (1)使用画笔—点击“画笔笔尖形状”,调整“间距” 这种方法简便,制作出的虚线点分布均匀,通过描边路径可以画出任意形状的虚线...
实例042 应用CSS+DIV实现指定尺寸无边框无滚动条窗口 65 实例043 应用JavaScript实现指定尺寸无边框无滚动条窗口 67 1.8 水平导航条应用 69 实例044 图片按钮导航条 69 实例045 导航条的动画效果 71 实例046 不用...
如何实现这样的效果呢? 首先,要准备一张这样的图片: 如何做出这样的图片呢? 一、打开Photoshop,新建一个640×480像素的文档 二、新建图层,按D键将前景色和背景色恢复为前黑后白,再按X键交换前景色和背景...
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...