css系列-border，outline

最新推荐文章于 2025-09-18 13:15:47 发布

原创最新推荐文章于 2025-09-18 13:15:47 发布 · 421 阅读

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

17 篇文章

订阅专栏

本文详细介绍了CSS中边框(border)的各种样式、宽度、颜色及圆角设置方法，同时讲解了轮廓线(outline)的样式、宽度、颜色及在表单元素中的应用。

类型	描述
none	定义无边框。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。

一次定义四个边

h2 {
	border-style: double;
}

样式顺序为上、右、下、左，可以分别进行定义

h2 {
	border-style: outset solid dotted double;
	border-width: 8px;
}

单独设置一边样式

h2 {
	border-top-style: double;
	border-width: 8px;
}

边框可以通过以下规则来设置

设置底部边框

border-bottom: solid 5px red;

行元素也可以进行边框设置

em {
	border-bottom: solid 2px red;
}

使用 border-radius 规则设置圆角，可以使用px | % 等单位。也支持四个边分别设置。

h2 {
	border-radius: 10px;
	border: solid 2px red;
}

通过边框绘制圆

div {
  width: 100px;
  height: 100px;
  border: solid 3px red;
  border-radius: 50%;
}

定义不同边

border-radius: 10px 30px 50px 100px;

行元素绘制圆角


em {
	border-radius: 50%;
	border-bottom: solid 2px red;
}

元素在获取焦点时产生，并且轮廓线不占用空间。可以使用伪类 :focus 定义样式。

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。