边框(Border) 和 轮廓(Outline) 属性

一、属性描述

属性	描述
border	复合属性。设置对象边框的特性。
outline	复合属性。设置或检索对象外的线条轮廓。
border-radius	设置或检索对象使用圆角边框。
border-image	设置或检索对象的边框样式使用图像来填充。
box-shadow	向方框添加一个或多个阴影。

 

二、属性详解

1、border 指定元素边框的样式、宽度和颜色:

p {
    border:1px solid red;
}

值	说明
border-width	指定边框的宽度
border-style	指定边框的样式，solid(实线边框)，dotted(虚线边框)
border-color	指定边框的颜色

附加：我们的边框有四个边，如果直接使用 border 属性，就默认四个边框一起设置，如果想要对边框四个边进行单独设置，可以这样做（这里以底部边框为例）：

p {
    border-bottom:5px solid blue;
}

border-bottom-width	设置或检索对象的底部边框宽度。
border-bottom-style	设置或检索对象的底部边框样式。
borde-bottomr-color	设置或检索对象的底部边框颜色。

同理，如果想要对顶部边框、右边框、左边框进行单独设置，只需要把 bottom 换为 top、right、left 即可

 

2、border-radius 为边框添加圆角，这里一定要先设置边框才能使用圆角属性

div {
  border: 2px solid red;
  border-radius: 25px;
}

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

与 border 同理，也可以对单个圆角进行设置

border-radius: 5px;

/* 等价于： */

border-top-left-radius: 5px;    /*左上角圆角*/
border-top-right-radius: 5px;    /*右上角圆角*/
border-bottom-right-radius: 5px;    /*右下角圆角*/
border-bottom-left-radius: 5px;    /*左下角圆角*/

 

3、border-image-* 属性一般用来构可扩展按钮

值	描述
border-image-source	用于指定要用于绘制边框的图像的位置
border-image-slice	图像边界向内偏移
border-image-width	图像边界的宽度
border-image-outset	用于指定在边框外部绘制 border-image-area 的量
border-image-repeat	用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。

 

4、box-shadow 设置一个或多个下拉阴影的框

div
{
    box-shadow: 8px 8px 5px #000;
}

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。