边框

边框属性：

属性 属性名称 设置值
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>