边框
边框属性：
| 属性 | 属性名称 | 设置值 |
|---|---|---|
| border-style | 边框样式 | none(默认值) solid(实线) double(双实线) groove(3D凹线) ridge(3D凸线) inset(3D嵌入线) outset(3D浮出线) |
| border-top-style border-left-style border-bottom-style border-right-style |
上下左右四边的边框样式 | 同border-style |
| border-width | 边框宽度 | 宽度数值+单位 thin(薄) thick(厚) medium(中等，默认值) |
| border-top-width border-left-width border-bottom-width border-right-width |
上下左右四边的宽度 | 与border-width相同 |
| border-color | 边框颜色 | 颜色名称 十六进制(HEX)码 RGB码 |
| border-top-color border-left-color border-bottom-color border-right-color |
上下左右四边的边框颜色 | 与border-color形同 |
| border | 综合设置 | |
| border-radius | 圆角边框 | 长度(px)或百分比(%) |
| border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius |
上下左右四边圆角 | 长度(px)或百分比(%) |
| border-image | 花边边框(图形边框) |
border-image花样边框
-
需要加浏览器私有前缀
-
border-image可以做出页面花边效果，格式：border-image: source slice width repeat
1.source：指定图片路径（必填）
2.slice：切除图片使用的边框线（必填）
3.width：图片宽度（可省略）
4.repeat：图片填充方式（可省略）设置值有stretch、repeat、round
stretch：把图片拉伸到整个边框区域
repeat：重复填充
round：重复填充并自动调整图片大小
圆角边框
如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。
但是，如果你要在四个角上一一指定，可以使用以下规则：
- 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
- 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
- 一个值： 四个圆角值相同
圆角属性
| 属性 | 描述 |
|---|---|
| border-radius | 所有四个边角 border---radius 属性的缩写 |
| border-top-left-radius | 定义了左上角的弧度 |
| border-top-right-radius | 定义了右上角的弧度 |
| border-bottom-right-radius | 定义了右下角的弧度 |
| border-bottom-left-radius | 定义了左下角的弧度 |
- 注：标准用八个值，border-radius：10px 20px 30px 40px / 10px 20px 30px 40px；(左边表示水平圆角，右边表示垂直圆角)
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>家宝</title>
<style>
#box1{
width: 100px;
height: 200px;
border: 1px blue solid;
border-left: 100px blue solid;
border-radius: 100px;
}
</style>
</head>
<body>
<div id="box1"></div>
</body>
</html>
