css3 border属性特殊用法 | TonyStudio

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

border基础

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

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

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

border-width

设置边框的宽度，语法：

// 全部的宽度
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 属性的图像源。语法：

// 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 使用。语法：

// 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，四个边框分别设置比较宽的不同的颜色，会怎么样？我们尝试下。代码：

.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;
}

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

// 左边的三角形
.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创建气泡

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

 .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;
  }
}

使用border做一个标记

我们需要做的效果类似于下面这样子：

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

<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代码：


.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画个心❤️

先来分解下❤️这个图案，我们要的效果是这样：

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

@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的特性来画图形。