DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

css如何设置文字描边效果?

  • css如何设置文字描边效果?

  • 已被浏览: 12
  • 想要使用CSS设置文字描边效果,主要有两种方法:使用text-shadow属性或text-stroke属性。text-shadow属性用于向文本添加字体边框或阴影;text-stroke属性用于向文本添加描边。
    css如何设置文字描边效果?下面本篇文章就来给大家介绍一下使用CSS设置文字描边效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

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

    方法1:使用text-shadow属性

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

    text-shadow是实现Web描述效果中最为常见的一种方案,简单的原理就是在文本的上、下、左、右添加文本阴影(不带模糊的阴影)。

    语法:

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

    属性值:

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

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

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

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

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

    示例:

    <!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;
    				text-align: center;
    				text-shadow: 
    				/* These four shadows create the most outer stroke */
    				-.025em -.025em 0 #444, 
    				.025em -.025em 0 #444, 
    				-.025em .025em 0 #444, 
    				.025em .025em 0 #444;
    				color: #fff;
    				/* For non-webkit-browsers */
    			}
    		</style>
    	</head>
    
    	<body>
    		<h1>Hello World</h1>
    	</body>
    
    </html>

    效果图:

    1.jpg

    方法2:使用text-stroke属性

    值得庆幸的是,现在可以直接使用text-stroke属性实现描述效果。

    text-stroke是text-stroke-width和text-stroke-color(给文本填充颜色)两个属性的简写。

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

    语法:

    text-stroke: <width> <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;
    				text-align: center;
    				-webkit-text-stroke: 1px black; 
    				color: #fff;
    			}
    		</style>
    	</head>
    
    	<body>
    		<h1>Hello World</h1>
    	</body>
    
    </html>

    效果图:

    2.jpg

    有了text-stroke属性,咱们可以非常轻易的实现文本描边效果,也告别了使用text-shadow属性来模拟文本描边效果。

    更多CSS相关知识,可访问 CSS教程 !!

    以上就是css如何设置文字描边效果?的详细内容,更多请关注DMOZ中文网站分类目录其它相关文章!

    TAG:CSS 文字描边

  • 上一篇:jquery如何判断是否是ie浏览器?
  • 与“css如何设置文字描边效果?”相关的资讯
  • CSS 选择器 — 重学前端
  • 90.CSS列表项悬停特效
  • html+css+js实现2048小游戏(PC)
  • 这 16 个 CSS 伪类,助你提升布局效率!
  • 83.CSS悬停效果(只是为了好玩)