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

边框(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 可选。阴影的颜色。