CSS3之边框
Posted 前端技术博文
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3之边框相关的知识，希望对你有一定的参考价值。
一、边框的基本属性
其主要包括三个类型值：
border-width：设置元素边框的粗细；
border-color：设置元素边框的颜色；
border-style：设置元素边框的类型。
缩写语法：border:border-width border-style border-color缩写后的每个属性值之间使用空格隔开，且不分先后顺序。
二、盒子阴影属性
box-shadow用来定义元素的盒子阴影。
语法规则：
1box-shadow:none|[inset x-offset y-offset blur-radius spread-radius color],
2[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：单边阴影
1.top{
2 box-shadow:0 -2px 5px red;
3}
4.right{
5 box-shadow:2px 0 5px green;
6}
7.bottom{
8 box-shadow:0 2px 5px blue;
9}
10.left{
11 box-shadow:-2px 0 5px orange
12}
示例2：四边相同阴影效果
1.box-shadow{
2 box-shadow:0 0 10px 10px #06c
3}
box-shadow不会影响页面的任何布局。
示例3：内阴影
1.box-shadow{
2 width:200px;
3 height:100px;
4 border:1px solid #ccc;
5 border-radius:5px;
6 box-shadow:inset 3px 3px 10px #06c;
7}
box-shadow的inset内阴影直接运用在img上是没有任何效果的，可以将box-shadow的内阴影使用在div标签上。
border-radius运用在img上时，Webkit内核浏览器也无效果，最后在img外添加一个容器标签，并将img转换成外容器的背景图片，将border-radius运用在外容器上才有圆角效果。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>css测试</title>
6 <style>
7 .box-shadow{
8 display: inline-block;
9 box-shadow: inset 5px 5px 10px #06c,inset -5px -5px 10px #06c;
10 }
11 img{
12 position: relative;
13 z-index: -1;
14 vertical-align: top;
15 }
16 /* img{
17 box-shadow: inset 5px 5px 10px #06c;
18 }*/
19 </style>
20</head>
21<body>
22<div class="box-shadow">
23 <img src="img/a1.jpg" alt="" width="200">
24</div>
25</body>
26</html>
示例4：多层阴影
1.box-shadow{
2 width:200px;
3 height:100px;
4 border:1px solid #ccc;
5 margin:30px;
6 box-shadow:0 0 0 1px red,
7 0 0 0 5px blue,
8 0 0 0 8px green,
9 0 0 0 12px yellow,
10 0 0 0 16px orange,
11 0 0 0 20px #06c,
12 0 0 0 24px lime;
13}
在使用多层级box-shadow时，需要特别注意阴影的顺序，最先写的阴影将显示在最顶层。
以上是关于CSS3之边框的主要内容，如果未能解决你的问题，请参考以下文章