怎么用 CSS 给文字加描边? 下面本篇文章给大家介绍一下使用 CSS 给文字添加描边效果的方法. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法 1: 使用 text-shadow 属性给文字加描边
text-shadow 属性用于向文本添加字体边框或阴影.
text-shadow 是实现 web 描述效果中最为常见的一种方案, 简单的原理就是在文本的上, 下, 左, 右添加文本阴影 (不带模糊的阴影).
示例:
- <!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 - 前缀支持此属性.
text-stroke 是 text-stroke-width 和 text-stroke-color(给文本填充颜色) 两个属性的简写.
示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- @import url(https://fonts.googleapis.com/css?family=Bangers); body { font-size:
- 50%; line-height: 1; } h1 { font: 8em/1 Bangers, sans-serif; -webkit-text-stroke:
- 1px black; color: #fff; }
- </style>
- </head>
- <body>
- <h1>
- Hello World
- </h1>
- </body>
- </HTML>
效果图:
有了 text-stroke 属性, 咱们可以非常轻易的实现文本描边效果, 也告别了使用 text-shadow 属性来模拟文本描边效果.
更多 Web 前端自学 https://www.html.cn/ 相关知识, 可访问: https://www.html.cn/book/css/ 教程 !!
来源: http://www.css88.com/qa/css3/17939.html