CSS3之边框
2018-05-07 本文已影响0人
LemonnYan
一、边框的基本属性
其主要包括三个类型值：
- border-width：设置元素边框的粗细；
- border-color：设置元素边框的颜色；
- border-style：设置元素边框的类型。
缩写语法：border:border-width border-style border-color缩写后的每个属性值之间使用空格隔开，且不分先后顺序。
二、盒子阴影属性
box-shadow用来定义元素的盒子阴影。
语法规则：
box-shadow:none|[inset x-offset y-offset blur-radius spread-radius color],
[inset x-offset y-offset blur-radius spread-radius color]
box-shadow属性可以使用一个或多个投影，如果使用多个投影必须使用逗号隔开。
参数说明：
- none：默认值，元素没有任何阴影效果
- inset：设置元素内阴影，如果不设置，默认是外阴影
- x-offset：阴影水平偏移量，可以是正负值。取正值，阴影在元素的右边；取负值，阴影在元素的左边。
- y-offset：阴影垂直偏移量，可以是正负值。取正值，阴影在元素底部；取负值，阴影在元素顶部。
- blur-radius：阴影模糊半径，只能是正值，值越大，阴影的边缘越模糊；如果取值为0，表示不具有模糊效果。
- spread-radius：阴影扩展半径，可以是正负值，取正值，整个阴影都延展扩大；取负值，整个阴影都缩小。
- color：阴影颜色
示例1：单边阴影
.top{
box-shadow:0 -2px 5px red;
}
.right{
box-shadow:2px 0 5px green;
}
.bottom{
box-shadow:0 2px 5px blue;
}
.left{
box-shadow:-2px 0 5px orange
}
示例2：四边相同阴影效果
.box-shadow{
box-shadow:0 0 10px 10px #06c
}
box-shadow不会影响页面的任何布局。
示例3：内阴影
.box-shadow{
width:200px;
height:100px;
border:1px solid #ccc;
border-radius:5px;
box-shadow:inset 3px 3px 10px #06c;
}
box-shadow的inset内阴影直接运用在img上是没有任何效果的，可以将box-shadow的内阴影使用在div标签上。
border-radius运用在img上时，Webkit内核浏览器也无效果，最后在img外添加一个容器标签，并将img转换成外容器的背景图片，将border-radius运用在外容器上才有圆角效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css测试</title>
<style>
.box-shadow{
display: inline-block;
box-shadow: inset 5px 5px 10px #06c,inset -5px -5px 10px #06c;
}
img{
position: relative;
z-index: -1;
vertical-align: top;
}
/* img{
box-shadow: inset 5px 5px 10px #06c;
}*/
</style>
</head>
<body>
<div class="box-shadow">
<img src="img/a1.jpg" alt="" width="200">
</div>
</body>
</html>
示例4：多层阴影
.box-shadow{
width:200px;
height:100px;
border:1px solid #ccc;
margin:30px;
box-shadow:0 0 0 1px red,
0 0 0 5px blue,
0 0 0 8px green,
0 0 0 12px yellow,
0 0 0 16px orange,
0 0 0 20px #06c,
0 0 0 24px lime;
}
在使用多层级box-shadow时，需要特别注意阴影的顺序，最先写的阴影将显示在最顶层。
