前端开发_HTML5_CSS部分-阴影(shadow)

最新推荐文章于 2024-06-21 11:27:52 发布

魔笛手7

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量9.5k

点赞数 6

分类专栏：前端文章标签： css html5 html shadow 阴影

本文链接：https://blog.csdn.net/u013185175/article/details/122012238

版权

前端专栏收录该内容

75 篇文章 9 订阅

订阅专栏

阴影(shadow)

1.引入

我们接下来学习一种比较特殊的样式特效——阴影。

2.阴影(shadow)

(1)、概述:所谓的阴影就是我们日常生活中缩减到的一种特殊的影子效果。

(2)、阴影分类:阴影大概可以分为:文字阴影(text-shadow)、盒子阴影(box-shadow)。

3.文字阴影(text-shadow)

(1)、文字阴影是正对文字产生的一种特效。

(2)、文字阴影相关的语法以参数说明

文字阴影语法以及相关属性:

text-shadow:h-shadow v-shadow blur color;

参数详解:

h-shadow：阴影的水平距离
v-shadow: 阴影的垂直距离
    blur: 阴影的模糊半径
   color: 阴影的颜色

(3)、文字阴影代码实现以及实现效果

<style type="text/css">
   p{
    font-size: 28px;
	font-family: "宋体";
	text-shadow: 3px 3px 5px black;
   }
</style>
<body>
   <p>蜀道难</p>
</body>

4.盒子阴影(box-shadow)

(1)、概述:盒子阴影是一种比较特殊的阴影，是正对于盒子模型产生的阴影方式。

(2)、盒子阴影的一般可以分为三类:普通的阴影、外阴影和内部阴影。下面我们将逐步讲解这三种阴影的详细内容。

(3)、盒子的普通阴影效果(box-shandow)

①、相关语法

普通阴影语法

box-shadow:h-shadow v-shadow blur spread color;

参数说明:

h-shadow:阴影的水平距离

v-shadow:阴影的垂直距离

    blur:阴影的模糊半径

  spread:阴影的大小

   color:阴影的颜色

②、盒子阴影代码实现以及实现效果

<style type="text/css">
   .box1{
	   font-size: 28px;
	   font-family: "宋体";
	   color: red;
	   line-height: 200px;
	   text-align: center;
			   
	   border: 1px solid black;
	   height: 200px;
	   width: 200px;
			   
	   box-shadow: 10px 10px 15px 20px green;
}
</style>

<body>
   <div class="box1">
	  盒子1
   </div>
</body>

(4)、盒子的外阴影、内阴影效果(box-shandow)

①、相关语法

内外阴影语法

box-shadow:阴影类型 x-offset y-dffset 阴影的模糊半径 阴影的扩展半径  color;

参数说明:

阴影类型:一般默认使用的是外阴影，如果要设置内阴影，则设置参数的值为"inset"。

x-offset:设置水平方向(x轴方向)的偏移量。

y-offset:设置垂直方向(y轴方向)的偏移量。

阴影的模糊半径:模糊半径是指模糊效果，其值越大，阴影的边缘就越模糊。

阴影的扩展半径:扩展半径值指定阴影的延申扩大还是缩小，正值表示扩大，负值表示缩小。

阴影的颜色:设置阴影的颜色。

②、内、外阴影代码实现以及实现效果

<style type="text/css">
   div {
	  font-size: 28px;
	  font-family: "宋体";
	  color: red;
	  border: 1px solid black;
	  height: 200px;
	  width: 200px;
	  float: left;
	  margin-left: 50px;
	  text-align: center;
   }

   .box1 {
	   box-shadow:inset 0px 0px 10px 20px green;
   }

   .box2 {
	   box-shadow: 0px 0px 10px 20px green;
   }
</style>
<body>
   <div class="box1">
	    设置内阴影
   </div>
   <div class="box2">
	    设置外阴影
   </div>
</body>