您的位置：首页 > Web前端 > CSS

CSS box-shadow

2017-02-13 16:09 218 查看

box-shadow是CSS3的特性，可以通过这个特性指定阴影的位移距离、颜色、模糊程度、扩散程度，同样也支持内阴影，从而打造出阴影或者光晕的效果。

今天我在写一个开关（switch）的纯CSS实现时，发现很多地方都用到了box-shadow，然后就定下了今天的博文内容：P~

标准语法：

{box-shadow: inset x-offset y-offset blur-radius spread-radius color}

相对应的也就是：

{box-shadow: 投影方式 X轴偏移量 Y轴偏移量阴影模糊半径阴影扩展半径阴影颜色}

box-shadow属性可以向图层添加一个或多个阴影，如果需要添加多个阴影，则需要使用逗号“,”分开。

说明

一共有六个特性值。值与值之间需要以至少一个空格进行间隔。

inset：该值为可选值，如果不设值的话，默认的投影方式是外阴影，如果设置阴影类型为“inset”，则其投影方式为内阴影。

x-offset：指的是阴影水平偏移量，该值可以是负的也可以是正的，如果为正值，则阴影在元素的右边；如果为负值，则阴影在元素的左边。该值为必要值。

y-offset：指的是阴影垂直偏移量，该值可以是负的也可以是正的，如果为正值，则阴影在元素的下面；如果为负值，则阴影在元素的上面。该值为必要值。

blur-radius：该值为可选值，其值只能为正值，设置值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊。

spread-radius：该值为可选值，该值可以是负的也可以是正的，如果为正值，则整个阴影都延展；如果为负值，则缩小。

color：该值为可选值，如果不设定任何颜色，则浏览器会取默认值。

运用box-shadow，让我们可以脱离PS繁琐的一张一张地来制作图片，且这样产生的阴影不会对排版产生影响。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
.wrap {
width: 80px;
height: 80px;
border: 1px solid #000;
}
.inner {
width: 30px;
height: 30px;
margin: 25px auto;
background: #006400;
box-shadow: 50px 50px #000;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
box-shadow实践
</body>
</html>

浏览器兼容性

浏览器兼容性想必大家都会很关心，毕竟不兼容的，你写再多也只不过是多余的代码而已。

为了能兼容支持的各大浏览器的书写方式：

//Firefox4.0-
-moz-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Safari and Google chrome10.0-
-webkit-box-shadow: 投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;
//Firefox4.0+ 、 Google chrome 10.0+ 、 Oprea10.5+ and IE9
box-shadow:  投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色;

阴影模糊

blur-radius值越大，阴影越模糊。

div {
box-shadow: 0 0 20px #ccc;
}

多层次阴影

写法：

.inner {
box-shadow: inset 0 3px 5px #ADFF2F, 0 2px 0 #98FB98, 0 4px 0 #228B22;
}

模拟多边框

实现效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
div {
width: 60px;
height: 40px;
background: #000;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px green, 0 0 0 6px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

当给同一个元素使用多个阴影属性时，需要注意他的顺序，最先写的阴影将显示在最顶层。

单边效果

使用多层次的box-shadow，以及x-offset和y-offset的正负值来实现单边效果。

实现效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style>
div {
width: 60px;
height: 40px;
background: #000;
box-shadow: 0 2px 0 gray, 0 -2px 0 red, 2px 0 0 green, -2px 0 0 blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

打造立体感

div {
color: #fff;
background-color: #BA55D3;
font-family: "Arial";
font-weight: 700;
font-size: 2.5em;
display: block;
padding: 4px;
border-radius: 8px;
box-shadow: 0px 9px 0px #9932CC, 0px 9px 18px rgba(0, 0, 0, .7);
margin: 100px auto;
width: 160px;
text-align: center;
}

内阴影效果

实现效果如下：

div {
box-shadow: inset 0 0 6px #000;
}

内阴影增加spread值，加强凹陷的真实感。

div {
box-shadow: inset 0 0 6px 2px #000;
}

可能写到的情况还不是非常全面，还是希望这篇文章对大家有所帮助：）。欢迎多多交流~文中若有不正之处，欢迎指正。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 box-shadow 阴影内阴影

相关文章推荐

新的分享

章节导航