css盒子阴影

最新推荐文章于 2024-06-17 03:14:49 发布

黎明寄波澜*

最新推荐文章于 2024-06-17 03:14:49 发布

阅读量4k

点赞数

分类专栏： css 文章标签： html css css3

原文链接：https://blog.csdn.net/miss_zxm/article/details/85236992

版权

css 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

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

注释: box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。

未加阴影效果如下：

在这里插入图片描述

1、外阴影
a、给元素右边框和下边框加外阴影——把水平阴影位置、垂直阴影位置偏移值均设为正值
在这里插入图片描述

css代码

/* 阴影向右偏移10px、向下偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink*/

box-shadow: 10px 10px 20px 10px pink;

css代码

/* 模糊距离为1px */

box-shadow: 10px 10px 1px 10px pink;

1 在这里插入图片描述

css代码

/* 阴影尺寸为1px */

box-shadow: 10px 10px 20px 1px pink;

在这里插入图片描述
b、给元素左边框和上边框加外阴影——把水平阴影位置、垂直阴影位置偏移值均设为负值

在这里插入图片描述

css代码

/* 阴影向左偏移10px、向上偏移10px、模糊距离为20px、阴影尺寸为10px、颜色为pink */

box-shadow: -10px -10px 20px 10px pink;

1
2
2、内阴影（inset）
a、给元素左边框和上边框加内阴影——把水平阴影位置、垂直阴影位置偏移值均设为正值

css代码

/* 使用关键字 inset 设置内阴影 */

box-shadow: 10px 10px 20px 1px pink inset;

在这里插入图片描述
b、给元素右边框和下边框设置内阴影——把水平阴影位置、垂直阴影位置偏移值均设为负值

在这里插入图片描述

css代码

box-shadow: -10px -10px 20px 1px pink inset;

3、实际应用
给div加外阴影实现雨后彩虹

html代码

<div class="box-shadow-test">
</div>
1
2
css代码

.box-shadow-test {
  height: 100px;
  width: 100px;
  margin: 100px auto;
  transform: rotate(45deg);
  border-radius: 100px 0 0 0;
  box-shadow:
  /*参数依次为：颜色、水平阴影位置、垂直阴影位置、模糊距离、阴影大小*/
     #f44336 -2px -2px 0 1px, 
     #ff9800 -4px -4px 0 3px,
     #ffeb3b -6px -6px 0 5px, 
     #8bc34a -8px -8px 0 7px, 
     #00bcd4 -10px -10px 0 9px,
     #2196f3 -12px -12px 0 11px,
     #9c27b0 -14px -14px 0 13px; 
}