CSS3中文本的描边(普通描边、凸起、凹陷)和发光效果

最新推荐文章于 2024-09-04 04:31:08 发布
最新推荐文章于 2024-09-04 04:31:08 发布
阅读量2w 收藏 13
点赞数 2
分类专栏： 前端(frontend) jsp/servlet 文章标签： CSS3 描边效果 发光效果 html 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cryhelyxx/article/details/13626355
版权 
利用text-shadow属性的特性，同时在上，下，左，右中个方向为文字设置多个阴影，且不设置模糊作用距离(即默认没有模糊效果)，就可以实现文本的描边效果了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本的描边效果</title>
<style type="text/css">
p{
	padding:50px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:36px;
	background-color:#ccc;
	color:#ddd;
	/*普通的描边*/
	text-shadow:-1px 0px #333;		/*向左阴影*/
				/*0px -1px #333;*/	/*向上阴影*/
				/*1px 0 #333;*/		/*向右阴影*/
				/*0px 1px #333;*/	/*向下阴影*/
}
</style>
</head>
<body>
<p>文本的描边效果</p>
</body>
</html>





如果将向左和向上的阴影颜色设置为白色，文字就会有凸起的效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本的描边效果</title>
<style type="text/css">
p{
	padding:50px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:36px;
	background-color:#ccc;
	color:#ddd;
	
	/*文字凸起的效果*/
	text-shadow:-1px 0 #fff,	/*向左阴影*/
				0 -1px #fff,	/*向上阴影*/
				1px 0 #333,		/*向右阴影*/
				0 1px #333;		/*向下阴影*/
}
</style>
</head>
<body>
<p>文本的描边效果</p>
</body>
</html>





如果将向右和向下的阴影颜色设置为白色，文字就会有凹陷的效果。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本的描边效果</title>
<style type="text/css">
p{
	padding:50px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:36px;
	background-color:#ccc;
	color:#ddd;
	
	/*文字凹陷的效果*/
	text-shadow:-1px 0 #333,	/*向左阴影*/
				0 -1px #333,	/*向上阴影*/
				1px 0 #fff,		/*向右阴影*/
				0 1px #fff;		/*向下阴影*/
}
</style>
</head>
<body>
<p>文本的描边效果</p>
</body>
</html>





也可以利用text-shadow属性的特性，不设置水平和垂直的偏移距离，仅设置模糊作用距离，这样就可以通过修改模糊值来实现强度不同的发光效果了。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本的发光效果</title>
<style type="text/css">
p{
	padding:50px;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bold;
	font-size:36px;
	background-color:#ccc;
	color:#ddd;
	text-shadow:0 0 10px #00F;		/*没有偏移的模糊设置*/
}
</style>
</head>
<body>
<p>文本的发光效果</p>
</body>
</html>





box动画外发光效果（发光半径及光颜色可以根据喜好自行修改）
	box-shadow:inset x-offset y-offset blur-radius spread-radius color
	换句说：
	对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
	
	简单发光效果 ：0px 0px 25px rgba(255,0,0,1)：水平偏移(右为正) 垂直偏移(下为正) 半径  颜色 
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">

<style type="text/css">
/* 动画发光效果---------------------------------- */
@-webkit-keyframes glowing {
  /* line 11, ../scss/partials/_glow.scss */
  from {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 12, ../scss/partials/_glow.scss */
  50% {
    -webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 13, ../scss/partials/_glow.scss */
  to {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
}

@-moz-keyframes glowing {
  /* line 17, ../scss/partials/_glow.scss */
  from {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 18, ../scss/partials/_glow.scss */
  50% {
    -webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 19, ../scss/partials/_glow.scss */
  to {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
}

@-o-keyframes glowing {
  /* line 23, ../scss/partials/_glow.scss */
  from {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 24, ../scss/partials/_glow.scss */
  50% {
    -webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 25, ../scss/partials/_glow.scss */
  to {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
}

@keyframes glowing {
  /* line 29, ../scss/partials/_glow.scss */
  from {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 30, ../scss/partials/_glow.scss */
  50% {
    -webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 25px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }

  /* line 31, ../scss/partials/_glow.scss */
  to {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 0px rgba(0, 255, 178, 1), 0px 1px 2px rgba(0, 0, 0, 0.2);
  }
}

.shine-shadow-box {
	/* 旋转效果 */
	/* -moz-transform: rotate(5deg) scale(1.00, 1.00) translate(0px, 0px)
		skew(0deg, 0deg);
	-moz-transform-origin: 0% 0%;
	-webkit-transform: rotate(5deg) scale(1.00, 1.00) translate(0px, 0px)
		skew(0deg, 0deg);
	-webkit-transform-origin: 0% 0%;
	-o-transform: rotate(5deg) scale(1.00, 1.00) translate(0px, 0px)
		skew(0deg, 0deg);
	-o-transform-origin: 0% 0%;
	transform: rotate(5deg) scale(1.00, 1.00) translate(0px, 0px)
		skew(0deg, 0deg);
	transform-origin: 0% 0% */
	
	-webkit-animation-duration: 3s;
  	-moz-animation-duration: 3s;
  	-ms-animation-duration: 3s;
  	-o-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-khtml-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: glowing;
	-khtml-animation-name: glowing;
	-moz-animation-name: glowing;
	-ms-animation-name: glowing;
	-o-animation-name: glowing;
	animation-name: glowing;
	
	/* box-shadow:inset x-offset y-offset blur-radius spread-radius color
	换句说：
	对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色} */
	
	/* 简单发光效果 ：0px 0px 25px rgba(0, 255, 178, 1)：水平偏移(右为正) 垂直偏移(下为正) 半径  颜色 */
	/* -moz-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
	-webkit-box-shadow: 0px 0px 25px rgba(0, 255, 178, 1);
	box-shadow: 0px 0px 25px rgba(0, 255, 178, 1); */
}
/* 动画发光效果 end---------------------------------- */
</style>
<title>盒子动画外发光的效果</title>
</head>
<body>
	<div class="shine-shadow-box" style="margin: auto; width: 300px; height: 150px; text-align: center; line-height:150px;">我会动画发光</div>
</body>
</html>




 

 

 

 

 


                

        

        

    

  


    

      

        

            

              
                
                  zhuxiongxian
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

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

				
			

			

				

					09-27
				

			

		

		

			
				
主要介绍了CSS将文字描边及填充文字颜色的方法,分别为text-stroke和text-fill-color属性的使用方法讲解,注意浏览器的兼容问题,需要的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
CSS3描边、外发光文字

				
			

			

				

					weixin_45062076的博客
				

				

					02-20
					
					317
					
				

			

		

		

			
				
p{
	text-align: center;
	font: bold xx-large ;
	color: aliceblue;
	font-size: 60px;
	text-shadow: -1px 0  black,
	0 1px black,
	1px 0 black,
	0 -1px black;
}





			
		

	



                


  
              

                


	

		

			

				
					
CSS3凹凸文字效果

				
			

			

				

					m0_63634307的博客
				

				

					07-22
					
					210
					
				

			

		

		

			
				
4、颜色(可以设置透明度，文字要设置在最后），同一个文字可以有多个阴影，中间用,隔开。水平偏移量  垂直偏移量  模糊度  颜色。1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值。

			
		

	





	

		

			

				
					
CSS中如何实现文字描边效果（Text Stroke）？

				
			

			

				

					官方推荐
				

				

					09-03
					
					9393
					
				

			

		

		

			
				
CSS中如何实现文字描边效果（Text Stroke）？

			
		

	



		

			
		



	

		

			

				
					
CSS-实现文字描边效果

				
			

			

				

					SqlloveSyn的博客
				

				

					01-07
					
					727
					
				

			

		

		

			
				
其原理为：给描边文本通过text-stroke: width color 设置描边效果，但此时为内描边，然后data-content的内容要与描边文本内容相同，通过attr()方法获取到data-content的内容，并结合::before将文本渲染出来，然后通过position: absolute 将其覆盖在要描边文字的上面，并将伪元素文本的描边要设置为0，最终就实现了文字的外描边效果。即可，该属性的第一个值表示描边的宽度，第二个值表示描边的颜色。

			
		

	





	

		

			

				
					
用css来实现文字描边效果

				
			

			

				

					courseware的专栏
				

				

					12-02
					
					3047
					
				

			

		

		

			
				
效果如图：  #text { float:left; color:#C60A12; filter:Dropshadow(offx=1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=1,color=#ffffff) Dropshadow(offx=-1,offy=0,color=#ffffff) Dropshadow(offx=0,offy=-

			
		

	





	

		

			

				
					
使用CSS3实现SVG路径描边动画效果入门教程

				
			

			

				

					12-14
				

			

		

		

			
				
本教程将介绍如何利用CSS3实现SVG路径的描边动画效果，无需依赖JavaScript，完全使用CSS来完成。首先，我们要理解SVG中关于描边（stroke）的一些基本属性。  1. **描边颜色（stroke）**：这是SVG中最关键的属性之一...

			
		

	





	

		

			

				
					
纯CSS3代码实现文字描边

				
			

			

				

					09-24
				

			

		

		

			
				
本文要介绍的是如何利用纯CSS3代码实现文字描边效果。文字描边是一种常见的视觉效果，它可以在文字的边缘添加颜色或阴影，使文字更加突出和有层次感。在CSS3中，实现文字描边主要用到的属性是text-shadow。  text-...

			
		

	





	

		

			

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

				
			

			

				

					10-30
				

			

		

		

			
				
用css滤镜实现的文字描边效果的代码  在CSS中，实现文字描边效果可以通过使用滤镜来实现。滤镜（Filter）是CSS的一个属性，它可以对元素应用视觉效果。下面我们将详细介绍如何使用CSS滤镜实现文字描边效果。  首先，...

			
		

	





	

		

			

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

				
			

			

				

					11-21
				

			

		

		

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

			
		

	





	

		

			

				
					
在HTML5中，我们可以通过CSS来设计盒子的描边效果

				
			

			

				

					BLOG域名:programb.blog.csdn.net
				

				

					07-03
					
					924
					
				

			

		

		

			
				
注意，你需要将CSS代码放在一个单独的CSS文件中（在这个例子中是styles.css），然后在HTML文件中通过标签引用它。如果你只是想在一个HTML文件中快速测试一些样式，你也可以直接在HTML文件的。/* 这是描边的样式，5px表示描边的宽度，solid表示描边的样式为实线，red表示描边的颜色。在这个例子中，我们创建了一个200px x 200px的盒子，并使用5px的红色实线描边。在HTML5中，我们可以通过CSS来设计盒子的描边效果。下面是一个简单的例子，其中创建了一个带有描边效果的盒子。

			
		

	





	

		

			

				
					
【CSS】文字描边的三种实现方式

					
热门推荐

				
			

			

				

					lynnhgwang的博客
				

				

					01-07
					
					1万+
					
				

			

		

		

			
				
我们介绍了css中三种文字描边的实现方式，它们各有优缺点，可以根据实际的应用场景选择最合适的方式！

			
		

	





	

		

			

				
					
CSS中如何实现文字描边效果

					
最新发布

				
			

			

				

					一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
				

				

					09-04
					
					1573
					
				

			

		

		

			
				
在Web设计中，给文字添加描边效果是一种常见的美化方式，它可以增加文字的视觉冲击力，尤其是在背景颜色复杂的情况下，描边可以使文字更加清晰易读。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。在某些设计中，我们可能希望描边与背景有所互动，比如背景图上的文字需要描边使其更为突出。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，首先，我们来看一个简单的例子，如何为文字添加单色描边。专栏系列（点击解锁）

			
		

	





	

		

			

				
					
内发光html,如何使用css3实现字体内发光效果（详解）

				
			

			

				

					weixin_33352628的博客
				

				

					06-27
					
					2696
					
				

			

		

		

			
				
在互联网日益发展的当今社会，人们对于网页用户体验的要求越来越苛刻，这就催生了更多的特殊效果的衍生，比如阴影效果，发光效果等，那么本文将向大家介绍一下如何使用css3实现字体发光的特殊效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。使用css3实现字体发光效果原理首先我们要输入需要加入特效的文本。然后我们需要了解的是css3中本身没有发光特效的属性，但是我们可以通过text-sh...

			
		

	





	

		

			

				
					
CSS给文字描边实现发光文字

				
			

			

				

					weixin_30735391的博客
				

				

					08-06
					
					223
					
				

			

		

		

			
				
利用CSs的滤镜功能，制作一个炫丽的文字发光特效，请注意filter滤镜内各个参数的设置情况，这是实现发光的关键，请注意要改变颜色值的说，最好统一修改，选择一个色系，要不然，只能看到很花，但没有发光效果。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh...

			
		

	





	

		

			

				
					
css3-文字外发光效果2-文字描边

				
			

			

				

					leiting084的专栏
				

				

					02-13
					
					650
					
				

			

		

		

			
				
使用文字阴影效果除了可以制作外发光之外，在某些时候还可以替代图片的文字描边效果。

上过程：

1、文字阴影

text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;

这是使用的黑色1像素阴影制作的描边

效果如下：





2、还有另外一种css

使用text-stroke，但是这种兼容性不如text-shadow，测试chrome下必须加前缀-webkit-

-webkit-text-stroke:1px #0

			
		

	





	

		

			

				
					
使用CSS给文字描边

				
			

			

				

					wing
				

				

					10-08
					
					970
					
				

			

		

		

			
				
使用CSS给文字描边，text-shadow text-stroke

			
		

	





	

		

			

				
					
圆滑描边 css,【CSS 学习】CSS 文本描边效果

				
			

			

				

					weixin_42120275的博客
				

				

					08-03
					
					266
					
				

			

		

		

			
				
text-shadow 实现文本描边h1{text-shadow:-.025em -.025em 0 #444,.025em -.025em 0 #444,-.025em  .025em 0 #444,.025em  .025em 0 #444;}text-stroke 实现文本描边text-stroke 是 ext-stroke-width 和 text-stroke-color 的两个属性简写...

			
		

	





	

		

			

				
					
css 文本描边_具有文本描边和阴影CSS轮廓文本

				
			

			

				

					cungui5726的博客
				

				

					08-18
					
					782
					
				

			

		

		

			
				
css 文本描边“Stroked” text is simply text with an outline applied to it. There are two primary methods of achieving this with CSS: directly, via text-stroke, or (with some limitations) via a specialized u...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值