边框设计
样式选择
类型 | 描述 |
---|---|
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;
}
单独设置一边样式
规则 | 说明 |
---|---|
border-top-style | 顶边 |
border-right-style | 右边 |
border-bottom-style | 下边 |
border-left-style | 左边 |
border-style | 四边 |
h2 {
border-top-style: double;
border-width: 8px;
}
边框宽度
边框可以通过以下规则来设置
规则 | 说明 |
---|---|
border-top-width | 顶边 |
border-right-width | 右边 |
border-bottom-width | 下边 |
border-left-width | 左边 |
border-width | 四边 |
边框颜色
规则 | 说明 |
---|---|
border-top-color | 顶边 |
border-right-color | 右边 |
border-bottom-color | 下边 |
border-left-color | 左边 |
border-color | 四边 |
简写规则
规则 | 说明 |
---|---|
border-top | 顶边 |
border-right | 右边 |
border-bottom | 下边 |
border-left | 左边 |
border | 四边 |
设置底部边框
border-bottom: solid 5px red;
行元素边框
行元素也可以进行边框设置
em {
border-bottom: solid 2px red;
}
圆角边框
使用 border-radius
规则设置圆角,可以使用px | %
等单位。也支持四个边分别设置。
选项 | 说明 |
---|---|
border-top-left-radius | 上左 |
border-top-right-radius | 上右 |
border-bottom-left-radius | 下载 |
border-bottom-right-radius | 下右 |
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 值。 |
outline-style: double;
线宽设置
outline-width: 10px;
线条颜色
outline-color: red;
组合定义
outline: red solid 2px;
表单轮廓线
表单默认具有轮廓线,但有时并不好看,使用以下样式规则去除。
input:focus {
outline: none;
}