CSS边框学习笔记

发表于 | 更新于 | 分类于

边框

边框属性为元素定义边框。

  • border：复合属性。一条声明指定所有属性。
1
border: width style color;
  • border-width：设置边框宽度。
  • border-style：设置边框样式。
  • border-color：设置边框颜色。

单条边框的简写属性：

1
2
3
4
border-top:
border-right:
border-bottom:
border-right:

border-width

border-width 属性的值可取：长度、百分数（相对于边框绘制区域）、thin（细）、medium（中等）、thick（粗）。

border-style

border-style 属性的值可取：

  • none：无边框
  • dashed：虚线边框
  • dotted：点状边框
  • double：双线边框
  • groove：槽线式边框
  • inset：内凹效果边框
  • outset：外凸效果边框
  • ridge：脊线边框
  • solid：实线边框

border-radius

border-radius 属性为边框创建圆角。

1
2
3
4
5
border-radius: 
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:

border-radius 属性的值可取：一对长度或一对百分数（水平半径与垂直半径）、一个长度或者一个百分数（水平半径等于垂直半径）。

图像边框

图像边框属性可以用图像来为元素添加边框。

  • border-image：复合属性。一条声明指定所有属性。（复合属性需要添加兼容前缀，单个属性不需要）
1
2
3
-webkit-border-image: source slice width outset repeat;
-moz-border-image: 
-o-border-image:
  • border-image-source：图像来源。
  • border-image-slice：切分图像的偏移。
  • border-image-width：图像边框的宽度。
  • border-image-outset：边框图像超出边框的量。
  • border-image-repeat：填充模式。

border-image-source

border-image-source 属性值的格式为：url(图像名称.jpg)。

border-image-slice

border-image-slice 属性值可取：1~4个长度且不加单位或百分数。指切割背景图片的四条线距离上右下左的距离。四条线将图片分割为9部分，除第5部分其他的部分会作为图片边框。
此属性还可再添加一个值 fill。可使第5部分作为背景填充进元素。

border-image-width

border-image-width 属性值可取：1~4个长度、auto。

border-image-repeat

border-image-repeat 属性值可取：

  • stretch：拉伸切分图
  • repeat：平铺切分图
  • round：平铺拉伸切分图
  • space：平铺切分图并保留一定间距


1
2
3
4
5
6
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.box1,
.box2,
.box3,
.box4 {
    width: 100px;
    height: 60px;
    margin: 10px;
    background: gray;
    border: 40px solid transparent;
    border-image-source: url(bg.png);
    border-image-slice: 60;}
.box1 {
    border-image-repeat: stretch;}
.box2 {
    border-image-repeat: repeat;}
.box3 {
    border-image-repeat: round;}
.box4 {
    border-image-repeat: space;}

关于在部分浏览器中 border-image 无效的问题，需要为其设置 border: 40px solid transparent; 其中的 border-width 的宽度即 border-image-width 的宽度。

border-image-outset

border-image-outset 属性值可取：1~4个长度或百分数、倍数（1代表宽度的1倍）。

边框图像超出边框的量会以元素的 background 颜色显示，为方便演示，用白色边框标示出元素。