CSS3盒子阴影box-shadow_html/css_WEB-ITnose
程序员文章站
2022-04-02 14:55:19
...
来自W3CSchool的解释
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
inset | 可选。将外部阴影 (outset) 改为内部阴影。 |
example
1、 box-shadow:10px 10px black;
2、 box-shadow:10px -10px black;
推荐阅读
-
一个CSS3滤镜Drop-shadow阴影效果_html/css_WEB-ITnose
-
CSS3 实现特殊阴影 (学习笔记)_html/css_WEB-ITnose
-
CSS3阴影 box-shadow的使用和技巧总结_html/css_WEB-ITnose
-
CSS3 实现特殊阴影 (学习笔记)_html/css_WEB-ITnose
-
基于CSS3和GSAP的超酷盒子爆炸动画特效_html/css_WEB-ITnose
-
浅谈 css3 box盒子模型以及box-flex的使用_html/css_WEB-ITnose
-
基于CSS3和GSAP的超酷盒子爆炸动画特效_html/css_WEB-ITnose
-
CSS3盒子模型
_html/css_WEB-ITnose -
【CSS3】-曲线阴影翘边阴影_html/css_WEB-ITnose
-
CSS3中关于圆角和阴影以及边框图片和盒子内减的详解