box-shadow属性

2024-06-06 02:38:06

一、定义和用法

box-shadow属性向框添加一个或多个阴影。

二、语法

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

h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。


三、例子

1. box-shadow:2px 3px 4px #CCC;

/*<div style="box-shadow:2px 3px 4px #CCC;width:300px;height:25px;margin:50px;border:2px solid #9CF;">博客园</div>*/

一个带外阴影的元素，阴影位置x轴向右偏移2px，y轴向下偏移3px，模糊范围4px，阴影颜色#CCC

2. box-shadow:inset 0 -4px #CCC;

带内阴影的元素，阴影x轴不偏移，y向上偏移4px，颜色#CCC

3.区别

1）内部阴影与外部阴影

水平数值正：向右偏移。外部阴影向右偏移，阴影在右；内部阴影向右偏移，阴影在左。

数值负：向左偏移。外部阴影向左偏移，阴影在左；内部阴影向左偏移，阴影在右。

垂直数值正：向下偏移。外部阴影向下偏移，阴影在下；内部阴影向下偏移，阴影在上。

数值负：向上偏移。外部阴影向上偏移，阴影在上；内部阴影向上偏移，阴影在下。

2）阴影位置大小

3）模糊距离

“0”指没有模糊效果就是最清楚，值越大越模糊，达到一定值的时候就是一团雾

4）阴影尺寸

转载于:https://www.cnblogs.com/teg-21/p/5210975.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 ...

最新文章

热门文章