box-shadow 给元素边框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

一、语法

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

h-shadow	必需	阴影的水平偏移量。可正可负，正值则向边框右侧偏移，负值向边框左侧偏移。
v-shadow	必需	阴影的垂直偏移量。可正可负，正值则向边框下侧偏移，负值则向边框上侧偏移。
blur	可选	模糊距离
spread	可选	阴影的拓展
color	可选	阴影的颜色
inset	可选	t投影方式，将外部阴影 (outset) 改为内部阴影。可放在属性值的最前面或最后面，否则无效。

二、用法示例

常见的是设置外阴影，即属性值中不添加inset，最常使用的形式是：

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

1、h-shadow、v-shadow设置0，此时四边都有阴影

.public{ 
 width: 320px;
 margin: 30px;
 padding:20px;
 font: bold 16px/100% "微软雅黑";
 border:1px solid black;
}
.demo1{ 
  box-shadow: 0 0 8px #F00
}

<div class="public demo1">box-shadow: 0px 0 8px #F00</div>

效果图如下：

2、单边侧阴影

扫描二维码关注公众号，回复： 2275245 查看本文章

 .public{ 
  width: 320px;
  margin: 30px;
  padding:20px; 
  font: bold 16px/100% "微软雅黑"; 
  border:1px solid red;
  border-radius: 80px
}       
.demo2{ 
  box-shadow: 0 -5px 8px #F00
}
.demo3{ 
  box-shadow: 0 5px 8px #F00
}
.demo4{
  box-shadow: -5px 0 8px #F00
}
.demo5{
  box-shadow: 5px 0 8px #F00
}

<div class="public demo2">上方box-shadow: 0px -5px 8px #F00</div>
<div class="public demo3">下方box-shadow: 0px 5px 8px #F00</div>
<div class="public demo4">左方box-shadow: -5px 0 8px #F00</div>
<div class="public demo5">右方box-shadow: 5px 0 8px #F00</div>

效果如下：

从上述效果图，可以理解上面提到的：

h-shadlw为正值时则阴影向边框右侧偏移、为负值则阴影向边框左侧偏移；

v-shadlw为正值时则阴影向边框下侧偏移、为负值则阴影向边框上侧偏移。

3、双侧阴影

 .public{ 
   width: 320px;
   margin: 30px;
   padding:20px;
   font: bold 16px/100% "微软雅黑";
   border:1px solid red;
   border-radius: 80px
}
.demo6{ 
   box-shadow: -5px -5px 8px #F00
}
.demo7{
   box-shadow: -5px 5px 8px #F00
}
.demo8{ 
   box-shadow: 5px -5px 8px #F00
}
.demo9{ 
   box-shadow: 5px 5px 8px #F00
}

<div class="public demo6">左上box-shadow: -5px -5px 8px #F00</div>
<div class="public demo7">左下box-shadow: -5px 5px 8px #F00</div>
<div class="public demo8">右上box-shadow: 5px -5px 8px #F00</div>
<div class="public demo9">右下box-shadow: 5px 5px 8px #F00</div>

效果如下：

4、属性值中使用sread，即格式为：

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

个人理解spread直译为伸开，在阴影中作用是拉伸或缩小阴影的大小，为正值则阴影尺寸变大，反之。

5、关于内阴影

即阴影出现在边框的内部。

CSS3之box-shadow

一、语法

二、用法示例

猜你喜欢