CSS3边框

1. 盒子阴影

使用 box-shadow 属性为盒子添加阴影

语法：

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

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

注意：

• box-shadow-none，表示没有阴影
• 默认的是外阴影（outset），但是不可以写，否则会造成阴影无效
• 盒子阴影不占用空间，不会影响其它盒子排列

例：

/* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写三个值，含义：水平位置、垂直位置、模糊值 */
box-shadow: 10px 10px 10px;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset;

Demo 演示

<div class="box1"></div>
<br>
<div class="box2"></div>
<br>
<div class="box3"></div>
<br>
<div class="box4"></div>
<br>
<div class="box5"></div>
<br>
<div class="box6"></div>

.box1,
.box2,
.box3,
.box4,
.box5,
.box6{
    width:50px;
    height:50px;
    background-color:pink;
}
.box1{
    /* 写两个值，含义：水平位置、垂直位置 */
    box-shadow: 10px 10px;
}
.box2{
    /* 写三个值，含义：水平位置、垂直位置、颜色 */
	box-shadow: 10px 10px red;
}
.box3{
    /* 写三个值，含义：水平位置、垂直位置、模糊值 */
	box-shadow: 10px 10px 10px;
}
.box4{
    /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
	box-shadow: 10px 10px 10px red;
}
.box5{
    /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
	box-shadow: 10px 10px 10px 10px blue;
}
.box6{
    /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
	box-shadow: 10px 10px 20px 3px blue inset;
}

2. 圆角边框

使用 border-radius 属性用于设置元素的外边框圆角

语法：

 border-radius:length;    

• 参数值可以为数值或百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
• 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

3. 边框外轮廓

outline-width ：外轮廓的宽度

outline-color ：外轮廓的颜色

outline-style ：外轮廓的风格

• none ： 无轮廓
• dotted ： 点状轮廓
• dashed ： 虚线轮廓
• solid ： 实线轮廓
• double ： 双线轮廓

outline-offset 设置外轮廓与边框的距离，正负值都可以设置（注意，outline-offset 不是 outline 的子属性，是一个独立的属性）

outline 复合属性 outline:50px solid blue;

注意，轮廓与边框有两点不同：

• 轮廓不占用空间
• 轮廓可能是非矩形