“box-shadow”属性(转)
“box-shadow”属性
box-shadow
属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。
语法
box-shadow
属性接收一个由5个部分组成的值
1
2
|
box-shadow: offset-x offset-y blur spread color position;
|
不像 border
等属性值可以拆分成子属性,box-shadow
属性是独立的。这意味着记录下属性值的顺序更加重要,特别是长度值。
offset-x
第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。
1
2
3
4
|
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
|
offset-y
第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边,而负值使阴影出现在元素的下边。
1
2
3
4
|
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
|
blur
第三个长度值代表阴影的模糊半径,举例说明,就像你在设计软件中使用高斯模糊滤镜。0
值意味着阴影是完全实心和尖锐的,没有任何模糊。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。
1
2
3
4
5
6
|
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
|
spread
第四个,同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0
会让阴影伸展得和元素的大小一样。
1
2
3
4
5
6
|
.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }
|
color
颜色值,正如你期望的,是阴影的颜色。它可以是任何颜色单位。(参考 Working with Colour in CSS)
1
2
3
4
|
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }
|
position
box-shadow
属性的最后一个值是一个可选的关键字,它代表着阴影的位置。默认情况下,这个值并而没有给出,这意味着阴影是一个外部阴影。我们能通过关键字inset
使阴影变成内部阴影。
1
2
3
4
|
.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }
.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }
|
多重阴影
box-shadow
属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。
1
2
3
4
5
|
.foo {
box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}
|
圆形阴影
box-shadow
属性的边界半径是通过该元素的 border-radius
属性来控制的。
1
2
3
4
5
|
.foo {
box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
border-radius: 50%;
}
|
把它们放在一起
把所有的部分放在一起,我们能通过使用box-shadow
属性创造出一些奇妙的效果。
一种非布局模块边界的替代品
我们可以使用box-shadow
属性来创建一种元素,这种元素是边界环绕的,但是它不干扰盒子模型或者页面上面的其他布局。更有甚者,用它来创造出多个阴影,我们可以在元素不同的边上拥有不同样式的边界。
1
2
3
4
5
6
7
8
9
10
|
.simple {
box-shadow: 0px 0px 0px 40px indianred;
}
.multiple {
box-shadow: 20px 20px 0px 20px lightcoral,
-20px -20px 0px 20px mediumvioletred,
0px 0px 0px 40px rgb(200,200,200);
}
|
弹出效果
在box-shadow
(和transform
)属性上进行变形,我们能创造出一个元素靠近或者远离使用者的假象。
1
2
3
4
5
6
7
8
9
10
11
|
.popup {
transform: scale(1);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
transform: scale(1.3);
box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
transition: box-shadow 0.5s, transform 0.5s;
}
|
浮动效果
我们能在:after
这样的伪元素上增加box-shadow
的效果。我们能使用这个来创建出元素底部的阴影,给予元素浮起或者掉落下来的假象。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.floating {
position: relative;
transform: translateY(0);
transition: transform 1s;
}
.floating:after {
content: "";
display: block;
position: absolute;
bottom: -30px;
left: 50%;
height: 8px;
width: 100%;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.2);
transform: translate(-50%, 0);
transition: transform 1s;
}
/* Hover States */
.floating:hover {
transform: translateY(-40px);
transition: transform 1s;
}
.floating:hover:after {
transform: translate(-50%, 40px) scale(0.75);
transition: transform 1s;
}
|
我们能通过box-shadow
属性达成许多其他的特效。举个例子,this popular pen 使用这个属性创造出8种类似纸张的效果。即使表面上看起来它是一个用于创建简单阴影的工具,实际上它可远比那个功能强大的多。
转载于:https://www.cnblogs.com/lianghong/p/8450448.html
“box-shadow”属性(转)相关推荐
- html中投影效果图,利用CSS3(box shadow)制作边框投影
应用CSS3的box shadow属性,可以直接在页面中使用投影,增加页面的立体效果. 最终效果预览 HTML 代码: CSS3 Box shadow 任鸟飞网页设计是一个关注于网页设计及网站开发.图 ...
- Shadow属性和【CSS3 Box Shadow(阴影)效果在线调试工具】
Shadow属性示例 向内/向外 | x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 inset 阴影向内 (默认向外) /* x偏移量 | y偏移量 | 阴影颜色 */ b ...
- Box Shadow(阴影)-Css3写法示例
Box Shadow(阴影)-Css3演示 -moz-box-shadow:2px 2px 5px #333333; -webkit-box-shadow:2px 2px 5px #333333; b ...
- CSS3 Box Shadow
语法: box-shadow:1px 2px 3px #FFF; box-shadow:阴影水平偏移值(可取正负值): 阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色: 兼容性 Firefox支持 ...
- Box Shadow阴影和圆角
一.盒子写Box Shadow阴影:如 box-shadow:2px 2px 5px #120F0B; //支持Opera浏览器 -moz-box-shadow:2px 2px 5px #120F0B ...
- CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
- Box Shadow CSS教程–如何向任何HTML元素添加投影
We can add a drop shadow to any HTML element using the CSS property box-shadow. Here's how. 我们可以使用CS ...
- css display:box 新属性
一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 前提:使用如下属性,必须在父代设置displ ...
- html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...
- Box Shadow
1.box-shadow属性 box-shadow属性是一个给元素添加阴影效果的css3属性,允许给元素设置一个或多个阴影效果,IE9+.Firefox 4.Chrome.Opera 以及 Safar ...
最新文章
- python英文单词及其出现次数-Python读取英文文件并记录每个单词出现次数后降序输出示例...
- Macbook m1 install Homebrew
- 深入浅出讲解MSE Nacos 2.0新特性
- ❤️时间管理大师!我是如何规划自己的时间的?充分利用每一分一秒!❤️
- HashMap源码解析(JDK1.8)
- 牛客网_PAT乙级_1010月饼 (25)
- 华为表示年内没有推出搭载鸿蒙操作系统手机的计划;OpenStack或被抛弃?iPhone至少还要三年可苹果自研5G调制解调器……...
- 数字反转(洛谷-P1307)
- 百度回应“抄袭天猫精灵”;ofo 押金退完需 12 年;VS Code 1.36 发布 | 极客头条...
- 在哪一类期刊中发表论文最难,SCI、SSCI、还是AHCI?
- CART决策树算法的Python实现(注释详细)
- python爬取统计局数据_利用Python抓取行政区划码的方法
- python多重背包_多重背包
- why elmlang:最简最安全的full ola stack的终身webappdev语言选型
- 【VirtualAPP 双开系列06】启动加载第三方 APP 过程
- 外网/公网出口IP查询方法汇总
- c语言修改pdf文件内容,PDF如何编辑,PDF文件怎么修改文字
- 华为天才少年年薪201万,作息时间表曝光:所有的逆袭,都是蓄谋已久
- 程序流程图N-S图PAD图
- mtu设置失败_华为路由器修改MTU值失败怎么办
热门文章
- DB与ES混合应用之数据实时同步
- oracle rds 运维服务_从Oracle一条新闻说起,为什么我们需要更好更开放的RDS服务?...
- android person类_es5 类与es6中class的区别小结_javascript技巧
- 如何提高lstm的预测精度_直线电机点胶机如何提高点胶精度及生产效率?
- 了解 Diffing 算法
- qtreeview编辑节点文本_[我花2个月做了叙事短篇游戏]我是怎么做游戏编辑工具的...
- c+mysql+sslmode_MySQL配置SSL主从复制
- tomcat连接oracle非常慢,关于myEclipse中tomcat 6.0启动慢的有关问题
- 微信小程序php java_PHP实现微信小程序用户授权的工具类示例
- 20200706:不同路径 II(leetcode63)