0%

css3 border属性特殊用法

Posted on Edited on In Views: Valine:
Symbols count in article: 5.1k Reading time ≈ 5 mins.

css的border属性是一个用于设置各种元素的边界样式的属性。比如我们常用的给一个元素设置边框：

1
border: 1px solid #ccc;

上面设置了一个宽度为1px，实线并且颜色为ccc灰色的边框。但除了这些简单的用法，我们还可以经过特殊设置，画出一些特殊的东西来，比如三角形或者其他不规则的东西。

先回顾下border属性。

border基础

首先，css3中border属性是一个简写属性，语法为：

1
border: [border-width || border-style || border-color | inherit];

可以设定宽度、风格、元素。

border-width

设置边框的宽度，语法：

1
2
3
4
5
6
7
8
// 全部的宽度
border-width: 5px;
// 纵向，横向
border-width: 2px 1.5em;
// 顶部，横向，底部
border-width: 1px 2em 4rem;
// top, right, bottom, left;
border-width: 1px 2em 0 4rem;

border-style

设置边框的样式，默认是none，所以在设置border的其他属性的时候，需要同时设置border-style，要不然边框是不会出现的。三个属性也和上面的border-width类似，用于边框的描述值有：

  • none 不显示边框，和hidden类似，如果没有设置背景图片，在单元格边框重叠情况下，none值优先级最低，会显示其他边框。
  • hidden 不显示边框，如果没有设置背景图片，在单元格边框重叠的情况下，hidden值优先级最高，不会显示其他边框。
  • dotted 一系列圆点。圆点半径是border-width的一半，标准没有定义两点之间的间隔大小，视不同实现而定。
  • dashed 显示为一系列短的方形虚线，标准中没有定义线段的长度和大小，视不同实现而定。
  • solid 显示为一条实线。
  • double 显示为一条双实线，宽度是border-width。
  • groove 显示为有雕刻效果的边框（效果和ridge相反）。
  • ridge 显示为有浮雕效果的边框（效果和groove相反）
  • inset 显示为有陷入效果的边框。
  • outset 显示为有突出效果的边框。

border-image

border-image允许在元素的边框上绘制图像，使用border-image属性时，将会替换掉border-style属性。需要注意的是，如果设置的图像为none或者不显示时，将应用border-style。所以最佳实践是，在设置border-image的同时，设置border-style，以方便降级使用。语法：

1
2
// 分别为image-source，image-height, image-width, image-repeat
border-image: url("/images/border.png") 30 30 repeat;

border-image-source

用来设置border-image属性的图像源。语法：

1
2
3
4
5
6
// none
border-image-source: none;
//
border-image-source: url(image.jpg);
// gradient
border-image-source: linear-gradient(to top, red, yellow);

border-image-slice

该属性通过规范将图片源明确的分割为9个区域：四个角、四边以及中心区域。通过制定的四个内向距离来实现。四个值来控制切片线的位置。
border-image-slice
中间的区域不会被边框使用，但当设置有fill关键词时将会被当做background-image使用。语法：

1
2
3
4
5
6
// slice
border-image-slice: 30%;
// all, top right bottom left
border-image-slice: 7 12 14 5;
// and fill, 放在末尾起作用。
border-image-slice: 10% 7 12 fill;

一到四个百分比或绝对长度，加上关键词填充（如果指定）。绝对长度表示光栅图像的像素和矢量图像的坐标。百分比的值是相对于图像的高度或高度，负值无效，高度或宽度的值被限制为100%。

border-radius 圆角

css3中的代表–第一个在社区中得到广泛使用的新属性。border-radius用来设置边框圆角，使用一个半径确定一个圆形，使用两个半径确定一个椭圆。（椭）圆与边框的交集形成圆角效果。语法：

1
2
// top-left, top-right, bottom-right, bottom-left;
border-radius: 10px 3% 3% 10%;

如何使用border创建三角形？

我们给元素设置border的时候，会有上、下、左、右四个边框线，如果我们把元素本身宽高设为0，四个边框分别设置比较宽的不同的颜色，会怎么样？我们尝试下。代码：

1
2
3
4
5
6
7
8
.arrow{
  width:0;
  height: 0;
  border-bottom: 100px solid #333;
  border-top: 100px solid red;
  border-right: 100px solid blue;
  border-left: 100px solid green;
}

border
可以看到，四条边框交叉后，正好分割成四个三角形，我们只需要去掉我们不需要的，就可以创建一个三角形。
比如，我们想要左侧的三角形，我们可以让右侧的边框隐藏，然后把上下边框的一半使用transparent让其透明。这样可以显示一个三角形出来：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 左边的三角形
.arrow-left{
    border-left: 100px solid green;
    border-right: none;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}
// 上边的三角形
.arrow-top{
    border-top: 100px solid red;
    border-bottom: none;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
// 右边的和下面的可以自己推算出来，这里就不赘述了。

border-arrow

用border创建气泡

我们可以使用元素和三角形结合做一个气泡：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 .bubble{
  position: relative;
  background-color: #292929;
  text-align: center;
  width: 150px;
  height: 80px;
  line-height:80px;
  border-radius: 5px;
  color: #fff;
  &::before{
    content: '';
    width: 0;
    height: 0;
    border-top: 15px solid #292929;
    border-bottom: none;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    position: absolute;
    bottom: -15px;
    right: 30px;
  }
}

bubble

使用border做一个标记

我们需要做的效果类似于下面这样子：
border
首先分析下，可以看做是一个正方形，然后前面一个三角形缺失了，补到了后面。我们可以使用css3的before和after属性来操作前面的三角形和后面的三角形，并用position的absolute进行定位。二话不说上代码：

1
2
3
4
5
6
7
<div class="heart">
  <div class="state-area">
    <div class="item current">第一步</div>
    <div class="item">第二步</div>
    <div class="item">第三步</div>
  </div>
</div>

我们使用item这个类来标记一个块，然后用current表示当前激活的游标。css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

.state-area{
  .item{
    display: inline-block;
    background: #ccc;
    height: 40px;
    width: 100px;
    line-height:40px;
    color: #333;
    margin-right: 15px;
    position: relative;
    padding-left: 40px;
    &::after{
      content: '';
      width: 20px;
      height: 40px;
      border-left: 20px solid #ccc;
      border-right: none;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      position: absolute;
      right: -20px;
    }
    &::before{
      content: '';
      width: 10px;
      height: 40px;
      border-left: 20px solid #fff;
      border-right: none;
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
      position: absolute;
      left: 0;
    }
    &:first-child::before{
      content: normal;
    }
  }
  .current{
    background-color: #1976d2;
    color: #fff;
    &::after{
      border-left-color: #1976d2;
    }
  }
}

用css画个心❤️

先来分解下❤️这个图案，我们要的效果是这样：
heart
可以我们可以看成是三个部分，一个是立着的正方形，作为基底，然后上面是左右两个半圆。我们可以利用before和after，这样就可以用一个div实现图案（我是用less写的css）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@heart-background: red;
.test {
  margin: 100px;
  .heart{
    .heart-body{
      width: 100px;
      height: 100px;
      background-color: @heart-background;
      position: relative;
      transform: rotate(-45deg);
      &::before{
        content: ' ';
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: @heart-background;
        position: absolute;
        left: 50px;
      }
      &::after{
        content: '';
        width: 100px;
        height: 100px;
        border-radius: 50%;
        position: absolute;
        background: @heart-background;
        left: 0;
        top: -50px;
      }
    }
  }
}

一些简单的图形可以拆解为多个单一的图形来进行拼接，可以用css3来画出来，这样可以省去一些图片的加载。后续会整理一篇单独的文章来汇总下用css的特性来画图形。

码字辛苦，打赏个咖啡☕️可好？💘