box-shadow(盒子阴影)
box-shadow 属性可以设置一个或多个下拉阴影的框
可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;
div.box{
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
| 值 | 描述 |
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset |
可选。从外层的阴影（开始时）改变阴影内侧阴影 |
注意：这里 inset 参数只能设置在第一或者最后，其他位置无效！
===直接上代码===
（1）h-shadow 和 v-shadow 两个值表示阴影的偏移量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
box-shadow: 10px 10px blue;
}
.box2{ box-shadow: -10px -10px blue;
}
.box3{
box-shadow: -10px 10px blue;
}
.box4{
box-shadow: 10px -10px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
结论：从上面结果可以看出，两个属性值可以取正值也可以取负值，并且方向为坐标系取值方向相同（x轴正值向右负值向左，y轴正值向下负值向上）
（2）blur 属性值表示阴影的模糊距离/半径（可选）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
/* 模糊距离为5 */
box-shadow: 10px 10px 5px blue;
}
.box2{
/* blur值为0等同于没设置模糊距离，没有模糊效果 */
box-shadow: -10px -10px 0px blue;
}
.box3{
/* blur值不能为负数，为负数则阴影失效 */
box-shadow: -10px 10px -5px blue;
}
.box4{
/* blur值越大越模糊 */
box-shadow: -10px 10px 20px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
结论：如果不写该参数或者该参数为0则阴影完全实心，没有模糊效果，并且该值越大阴影越模糊
（3） spread 属性值表示设置的阴影大小（可选）
这个值可以被看作是从元素到阴影的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
/* spread为0（默认值） */
box-shadow: 0px 0px 10px 0px blue;
}
.box2{
/* spread为5(正值会在元素的四个方向延伸阴影) */
box-shadow: 0px 0px 10px 5px blue;
}
.box3{
/* spread为-1(负值会使阴影变得比元素本身尺寸还要小) */
box-shadow: 0px 0px 10px -1px blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
结论：
- 默认值“0”会让阴影变得得和元素的大小一样（无设置）
- 正值会在元素的四个方向延伸阴影
- 负值会使阴影变得比元素本身尺寸还要小
（4） color 属性值指定阴影的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
/* color值表示阴影颜色 */
box-shadow: 0px 0px 10px 5px blue;
}
.box2{
box-shadow: 0px 0px 10px 5px green;
}
.box3{
box-shadow: 0px 0px 10px 5px orange;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
（5）inset 设置阴影为内侧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
}
.box1{
box-shadow: 0px 0px 10px 5px blue;
}
.box2{
/* inset设置阴影为内侧阴影 */
box-shadow: 0px 0px 10px 5px blue inset;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
至此，box-shadow盒子阴影属性已经介绍完毕
box-shadow(盒子阴影)的更多相关文章
- 盒子显隐，伪类边框，盒子阴影,2d平面形变
-盒子显隐 显隐的盒子尽量不影响其他盒子的布局 display:none; 消失的时候不占位置,显示的时候占位 opacity:0-1; 盒子透明度 overflow: hidden; 超出部分隐藏 ...
- 字体图标,盒子显隐,overflow属性,伪类设计边框,盒子阴影2d形变
字体图标 ''' fa框架: http://fontawesome.dashgame.com/ 下载 => 引入css文件 引入字体图标库 <link rel="styleshe ...
- Shadow Map阴影贴图技术之探 【转】
这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...
- 前端,字体图标,盒子显隐,2d形变,盒子阴影
---恢复内容开始--- 字体图标 1.将font-awesome-4.7.0文件夹放入项目内 2.在html head中连接 3.在body中导入 盒子显隐 1.使用高度显隐 <p>-- ...
- 盒子阴影 box-shadow
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Box Model 盒子模型
Box Model盒子模型,是初学者在学习HTMl5时会学到的一个重要的模型,也有一些人称它为框模型,因为盒子是属于3维,而框是平面的.称之为盒子模型,是因为其结构和盒子十分相似,其最外面是margi ...
- 第50天学习打卡（CSS 圆角边框 盒子阴影 定位）
4.4圆角边框 圆角边框: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- CSS第四天总结 更多的属性 圆角 边框图片 段落属性 颜色渐变 盒子阴影
圆角边框: border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例 在CSS3中我们终于 ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
随机推荐
- Kubernetes 入门基础
我们要学习 Kubernetes,就有首先了解 Kubernetes 的技术范围.基础理论知识库等,要学习 Kubernetes,肯定要有入门过程,在这个过程中,学习要从易到难,先从基础学习. 接下来 ...
- [hdu4388]Stone Game II
不管是否使用技能,发现操作前后所有堆二进制中1的个数之和不变.那么对于一个堆其实可以等价转换为一个k个石子的堆(k为该数二进制的个数),然后就是个nim游戏. 1 #include<bits/s ...
- 洛谷 P7879 -「SWTR-07」How to AK NOI?（后缀自动机+线段树维护矩乘）
洛谷题面传送门 orz 一发出题人(话说我 AC 这道题的时候,出题人好像就坐在我的右侧呢/cy/cy) 考虑一个很 naive 的 DP,\(dp_i\) 表示 \([l,i]\) 之间的字符串是否 ...
- Codeforces 891D - Sloth（换根 dp）
Codeforces 题面传送门 & 洛谷题面传送门 换根 dp 好题. 为啥没人做/yiw 首先 \(n\) 为奇数时答案显然为 \(0\),证明显然.接下来我们着重探讨 \(n\) 是偶数 ...
- Codeforces 1225G - To Make 1（bitset+状压 dp+找性质）
Codeforces 题目传送门 & 洛谷题目传送门 还是做题做太少了啊--碰到这种题一点感觉都没有-- 首先我们来证明一件事情,那就是存在一种合并方式 \(\Leftrightarrow\) ...
- Codeforces 1476G - Minimum Difference（带修莫队+根号平衡）
Codeforces 题目传送门 & 洛谷题目传送门 震惊!我竟然独立切掉了这道 *3100 的题! 虽然此题难度的确虚高,感觉真实评分也就 2800~2900 罢.但感觉还是挺有成就感的( ...
- 【转】群体研究套路：开心果denovo+重测序+转录组+群体进化+选择位点
转自公众号Eric生信小班.学习群体遗传套路 中科院昆明动物园吴东东研究团队联合国外研究团队2019年在Genome Biology发表题为Whole genomes and transcriptom ...
- 【R】clusterProfiler的GO/KEGG富集分析用法小结
前言 关于clusterProfiler这个R包就不介绍了,网红教授宣传得很成功,功能也比较强大,主要是做GO和KEGG的功能富集及其可视化.简单总结下用法,以后用时可直接找来用. 首先考虑一个问题: ...
- python-django-事务使用
其中任何一个步骤失败都不行, 失败则回滚 在一对一的模型下 例如,用户基本信息和用户详细信息 必须两个一起添加用户信息才算成功 通过位置参数来实现 手动控制事务 def page_trans_hand ...
- nginx——网站显示问题
一般来说修改3个位置,一个是nginx.h.另一个是ngx_http_header_filter_module.c.还有一个ngx_http_special_response.c. 提示:一般修改都是 ...