1.1.1 边框阴影
box-shadow
与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
如box-shadow: 5px 5px 5px #CCC
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
4、inset可以设置内阴影；
注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，实际开发中可以大胆使用。
/* 外阴影*/
.outset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量 阴影模糊半径 阴影扩展半径 阴影颜色*/
box-shadow: 10px2px 20px;
}
/* 内阴影*/
.inset {
width: 100px;
height: 100px;
/* x 偏移量 y偏移量 阴影模糊半径 阴影扩展半径 阴影颜色*/
box-shadow: 10px2px 20px inset;
}
/* 阴影x为负数*/
.negative1 {
:width: 100px;
height: 100px;
box-shadow: -10px2px 6px red;
}
/* 阴影y为负数*/
.negative2 {
width: 100px;
height: 100px;
box-shadow: 4px-10px 6px red;
}
/* 多阴影*/
.multi {
width: 100px;
height: 100px;
/*如果需要添加多个阴影只需要用逗号隔开*/
box-shadow: 4px2px 20px red, -4px -2px 6px green, 0px 0px 12px 5px blue inset;
}
*******相应代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.outset {
width: 200px;
height: 100px;
background: pink;
box-shadow: 5px 5px 10px red;
}
.inset {
width: 200px;
height: 100px;
background: pink;
box-shadow: 5px 5px 10px red inset;
}
.negative1 {
width: 200px;
height: 100px;
background: pink;
box-shadow: -10px 5px 20px red inset;
}
.negative2 {
width: 200px;
height: 100px;
background: pink;
box-shadow: 5px -10px 20px red;
}
.multi {
width: 100px;
height: 100px;
/*如果需要添加多个阴影只需要用逗号隔开*/
box-shadow: 4px 2px 20px red, -4px -2px 6px green, 12px 5px blue inset;
}
</style>
</head>
<body>
<h2>外阴影</h2>
<div class="outset"></div>
<h2>内阴影</h2>
<div class="inset"></div>
<h2>阴影x为负数</h2>
<div class="negative1"></div>
<h2>阴影y为负数</h2>
<div class="negative2"></div>
<h2>多阴影</h2>
<div class="multi"></div>
</body>
</html>相关效果
4408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
