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>
效果图:
来源: http://www.css88.com/qa/css3/10457.html