`

用CSS3实现文字描边

    博客分类:
  • css
 
阅读更多

CSS3作为新兴的前端技术可以实现很多复杂变化的效果,比如文字描边。

 

这里主要用到text-shadow属性,顾名思义就是为文字加上阴影效果。例:

 

 

text-shadow:10px 5px 2px #f60;

 

各位置参数说明:

 

 

text-shadow:x位移 y位移 模糊程度 颜色

 

 

其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。

 

现在说正题,这种思路其实很简单:对四个方向都作出模糊程度为零的1px阴影。

 

写法如是:

 

-webkit-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
-moz-text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0;
text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; 
*filter: Glow(Color=#000, Strength=1);

 这个针对各主流浏览器做了适配的写法。

 

原则上,text-shadow支持了多方向阴影的写法,不过代价是代码偏多!

<!--EndF-->
分享到:
评论

相关推荐

    纯CSS3代码实现文字描边

    总之,通过纯CSS3代码实现文字描边,不仅可以避免使用多余的图像资源,减少页面加载时间,还可以在各种分辨率和不同设备上保持较好的显示效果。随着CSS3技术的不断发展和完善,我们可以期待未来将有更多简洁高效的...

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

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

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

    在CSS3中,实现文字描边效果有两种主要方法:一种是使用`text-stroke`属性,另一种是利用`text-shadow`属性。这两种方法各有特点,适用于不同的场景。 ### 解决方法一:`text-stroke`属性 `text-stroke`是CSS3中的...

    css3文字特效_css3火焰文字_css3文字渐变代码

    本文将深入探讨“CSS3文字特效”,特别是“CSS3火焰文字”以及“CSS3文字渐变代码”的实现方法。 一、CSS3文字特效基础 CSS3文字特效主要依赖于其新增的属性和功能,如文本阴影(text-shadow)、文本描边(text-...

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

    3. 文字描边(stroke和stroke-width):利用SVG的描边属性,可以在文字边缘添加线条,`stroke: color; stroke-width: width;`。 4. 文字填充(fill):对于SVG文字,可以改变填充颜色,`fill: color;`,甚至可以...

    简单掌握CSS3将文字描边及填充文字颜色的方法

    在CSS3中,文本的视觉效果可以通过多种方式增强,其中包括为文字添加描边和填充颜色。这两个特性,text-stroke和text-fill-color,为设计师提供了更丰富的文本样式选择,但需要注意的是,它们并非所有浏览器都支持,...

    css3 文字效果

    3. **文字描边** (text-stroke): 这个属性允许我们为文字添加描边,使文字边缘更明显。例如: ```css -webkit-text-stroke: width color; ``` width定义描边宽度,color定义描边颜色。 4. **文字填充模式** ...

    粉色描边CSS3大气模板

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

    CSS3实现的十五种图片经过文字显示特效源码下载

    在本文中,我们将深入探讨如何使用CSS3来实现十五种不同的图片经过文字显示的特效。CSS3是 Cascading Style Sheets 的第三版,它为网页设计带来了丰富的视觉效果和动画功能,使得网页元素的呈现方式更加多样化。以下...

    纯css3实现的文字loading动画特效源码.zip

    实际的源代码文件可能包含了实现文字loading动画的具体CSS规则和HTML结构。 综上所述,这个压缩包包含了一个纯CSS3实现的文字loading动画,涉及了CSS3的动画、响应式设计、布局、伪类和伪元素等多个重要概念,使用...

    css3文字特效

    3. **文字描边(text-stroke)** 使用`-webkit-text-stroke`可以为文字添加描边效果,提高文字的可读性或者增强视觉冲击力: ```css h1 { -webkit-text-stroke: 2px black; } ``` 4. **文字填充(text-fill-...

    CSS3文字特效艺术文字样式代码.zip

    这个压缩包内的代码示例对于前端开发者来说是非常宝贵的资源,不仅可以学习到各种CSS3文字特效的实现方式,还可以激发创新思维,为自己的项目增添更多视觉吸引力。通过实践这些代码,你可以更深入地理解CSS3的强大...

    纯css3实现的文字组成爱心形状动画特效源码.zip

    2. **文本处理**:CSS3允许对文本进行更细致的控制,包括文字阴影、文字填充、文字描边、文本溢出处理等,这些都可能在爱心动画中起到重要作用。 3. **转换(Transform)**:通过`transform`属性,可以对元素进行...

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

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

    CSS3与SVG实现文字背景动画炫酷特效源码.zip

    这个"CSS3与SVG实现文字背景动画炫酷特效源码.zip"压缩包可能包含了一个示例项目,展示如何利用这两项技术来增强网页元素,特别是文字的表现力。以下是这些技术的关键知识点: 1. CSS3 动画: - `@keyframes` 规则...

    CSS3 特效 文字特效 发光 HTML5

    CSS3中的文字特效主要包括:文字阴影、文字描边、文字渐变、文字旋转、文字大小写转换、文字间距调整等。这些特效可以为网页文本增添层次感和动态感,使内容更加引人注目。 二、CSS3 发光效果 1. 使用`text-shadow...

    20种配合场景CSS3鼠标滑过文字背景动画特效

    16. 文字流动效果:通过CSS3的流体布局和动画,可以实现文字像水流一样流动的视觉效果。 17. 高光效果:使用`box-shadow`或`text-shadow`可以创建高光效果,鼠标滑过时增强视觉焦点。 18. 背景颜色循环:结合`:nth...

    CSS3实现创意链接样式.zip

    而文字描边(Text Stroke)则可以在文字边缘添加描边,让文字更显突出。这两项技术在某些设计风格中能起到很好的装饰作用。 此外,我们还可以利用CSS3的动画(Animation)和过渡(Transition)属性为链接添加动态...

Global site tag (gtag.js) - Google Analytics