css系列-border，outline

最新推荐文章于 2021-11-04 10:39:51 发布

前端蜗牛君

最新推荐文章于 2021-11-04 10:39:51 发布

阅读量354

点赞数 1

分类专栏： css 文章标签： css border outline

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

本文链接：https://blog.csdn.net/zqd_java/article/details/103283007

版权

17 篇文章 0 订阅

订阅专栏

类型	描述
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 值。