您现在的位置是: 首页 » 网页代码 » 如何使用CSS给文字添加描边效果?
网页代码

如何使用CSS给文字添加描边效果?

网站优化小编十一月 27, 2019 42人已围观

CSS如何实现文字描边效果?下面本篇文章就来给大家介绍一下使用CSS给文字添加描边效果的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

想要使用CSS给文字添加描边效果,主要有两种方法:使用text-shadow属性或text-stroke属性。

方法1:使用text-shadow属性

text-shadow属性用于向文本添加字体边框或阴影。

语法:

text-shadow: h-shadow v-shadow blur-radius color|none;

属性值:

● h-shadow:它在字体周围设置水平阴影。

● v-shadow:它设置字体周围的垂直阴影。

● blur-radius:设置字体周围的模糊半径。

● color:它设置字体周围的颜色。

● none:它没有在字体周围设置任何内容。

示例1:使用text-shadow属性为文本创建阴影

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <style> 
        h1 { 
            text-shadow: 0 0 5px #FF0000, 0 0 5px #6bf403; 
        } 
    </style> 
</head> 
<body> 
    <h1>Hello World</h1> 
</body> 
</html>

效果图:

网站运营中栏目排名优化技巧

示例2:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <style> 
        .demo1 { 
            color: white; 
            font-size: 40px; 
            text-shadow: -1px 1px 0 #000, 1px 1px 0 #000; 
        }
        .demo2{
        	color: white; 
            font-size: 40px; 
            text-shadow: -1px 1px 0 #000, 1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000; 
        }
    </style> 
</head> 
  
<body> 
    <p class="demo1">Hello World</p>
    <p class="demo2">Hello World</p>
</body> 
  
</html>

效果图:

网站运营中栏目排名优化技巧

方法2:使用text-stroke属性

text-stroke属性用于向文本添加描边。此属性可用于更改文字的描边宽度和颜色。使用-webkit-前缀支持此属性。

示例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <style> 
        .demo { 
            color: white; 
            font-size: 40px; 
            -webkit-text-stroke: 1px black; 
        }
    </style> 
</head> 
  
<body> 
    <p class="demo">Hello World</p>
</body> 
</html>

效果图:

网站运营中栏目排名优化技巧

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:273天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4011 条
  • 文章评论:175 条
  • 微信公众号:扫描二维码,关注我们