如何调整网页元素的边框和轮廓样式？

本文共计927个文字，预计阅读时间需要4分钟。

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