`
davice_li
  • 浏览: 93775 次
  • 性别: 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代码实现文字描边效果。文字描边是一种常见的视觉效果,它可以在文字的边缘添加颜色或阴影,使文字更加突出和有层次感。在CSS3中,实现文字描边主要用到的属性是text-shadow。 text-...

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

    在实现描边动画时,主要涉及`stroke-dasharray`和`stroke-dashoffset`这两个属性。通过改变`stroke-dashoffset`的值,可以从“无”到“有”逐步显示路径,形成动画效果。例如,如果`stroke-dasharray`定义了一条超过...

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

    在这段代码中,第一段文字没有描边效果,第二段文字使用了`text-stroke`属性实现描边,第三段文字使用了`text-shadow`属性实现描边。 ### 结论 选择哪种方法取决于项目需求和浏览器兼容性要求。`text-stroke`提供...

    粉色描边CSS3大气模板

    模板中的粉色描边效果是通过CSS3的边框样式(border-style)实现的,可能使用了如`solid`、`double`或`dashed`等边框类型,并结合`border-color`定义了独特的粉色,以增加视觉吸引力。此外,可能还利用了`border-...

    css3 文字效果

    在CSS3中,我们可以通过以下几种方式实现独特的文字效果: 1. **文字阴影** (text-shadow): 这个属性允许我们为文字添加阴影,增加立体感。例如: ```css text-shadow: x-offset y-offset blur-radius color; ``...

    css实现个性化select 下拉选择框(3种风格)

    在本主题中,我们将探讨如何使用CSS实现三种不同的下拉选择框(select)风格:苹果风格、描边风格和凹凸风格。 1. 苹果风格的下拉选择框: 苹果风格的下拉选择框通常以其简洁、优雅的设计而著称。要实现这一风格,...

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

    为了实现描边动画,我们可以借助CSS。我们将六边形的`stroke-dasharray`属性设置为边长总和,`stroke-dashoffset`初始值设为同样值,然后通过CSS动画逐步减小`stroke-dashoffset`,达到从无到有描边的效果: ```css...

    svg动画之动态描边效果

    动态描边效果是SVG动画的一种常见应用,它可以通过控制描边的dasharray和dashoffset属性来实现。这篇文章分享了如何使用SVG和CSS3创建两种动态描边效果。 1. 简单的线性动态描边: 在这个实例中,作者使用SVG的`...

    各种css3效果动画

    11. **文字渲染(Text Effects)**:通过`text-stroke`, `text-fill-color`, `text-shadow`等属性,可以实现文字描边、填充色和阴影效果,增强文字的视觉表现力。 12. **SVG图形与整合**:SVG(Scalable Vector ...

    彩虹色文本描边动画网页特效.rar

    CSS是用于控制网页元素样式和布局的语言,而这里的特效可能是通过CSS3的新特性,如动画(animation)、过渡(transition)或者滤镜(filter)来实现的,以创造出动态的文本描边效果。 "网页特效"则是一个宽泛的标签...

    纯css3艺术文字样式效果代码

    5. 文字动画(@keyframes):CSS3的动画功能可以为文字添加动态效果,比如闪烁、滑动等,通过定义`@keyframes`规则和`animation`属性实现。 三、案例分析 在压缩包中的`texiao3410_1560680953`文件中,可能包含了...

    粉色描边CSS3大气模板是一款适合企业品牌建设的CSS3网站模板。_html网站模板_网页源码移动端前端_H5模板_自.rar

    例如,粉色描边效果就是通过CSS3的边框样式实现的,设计师可以精确控制边框的宽度、颜色和样式,创造出独特的视觉效果。此外,CSS3还支持选择器的增强,如伪类和伪元素,使元素的交互和动画更为精细。渐变、阴影、...

    纯CSS3实现炫酷视频播放式炫酷动画特效代码

    【纯CSS3实现炫酷视频播放式炫酷动画特效代码】这一资源主要聚焦于利用CSS3技术来创建吸引人的视频播放样式以及动态效果。CSS3是层叠样式表的最新版本,它引入了一系列强大的功能,使得网页设计变得更加丰富多彩,...

    svg、html+css扇形自定义角度、雷达扫描效果

    本项目涉及到了SVG用于绘制扇形以及HTML+CSS实现雷达扫描效果,这两大技术结合,能够为网页增添丰富的视觉表现力。以下是关于这两个知识点的详细解释: 1. SVG(可缩放矢量图形): SVG是一种基于XML的矢量图像格式...

    CSS3文本效果共2页.pdf.zip

    通过调整描边宽度和颜色,可以实现不同的视觉效果。 4. **文本填充模式(text-fill-color和text-stroke-color)** 在CSS3中,text-fill-color允许改变文本的填充颜色,而text-stroke-color则用于定义描边颜色,这...

    Css文字阴影效果代码.rar

    本压缩包“Css文字阴影效果代码.rar”提供了关于CSS文字阴影效果的实现,这对于提升网页的视觉吸引力和用户体验至关重要。在网页设计中,文字阴影可以增加文本的立体感,使其在不同背景下更易读,同时也为网页增添了...

    30余个CSS导航菜单效果

    9. **文字特效**:例如,利用text-shadow、text-stroke等属性,可以实现文字描边、阴影等效果,使菜单文字更具视觉冲击力。 10. **伪类选择器**:如`:hover`、`:active`、`:focus`等,可以帮助我们针对不同的交互...

    绿色描边HTML5网页模板是一款非常清新简洁的HTML5+CSS3制作模板。_html网站模板_网页源码移动端前端_H.rar

    此外,CSS3还支持背景图像的渐变、阴影和边框半径,这在这款模板中可能被用来实现绿色描边效果。 JavaScript作为网站交互的核心,可能在这套模板中用于实现各种动态效果,如响应式导航菜单、轮播图、表单验证等。...

Global site tag (gtag.js) - Google Analytics