CSS实现多边框技巧

今天在css-tricks看到一篇关于CSS实现多边框技巧文章，觉得非常不错，就试着写一个demo学习记录下来。全文通过css-tricksOutline轮廓和box-shadow元素的阴影产生边框、Border边框和box-shadow元素的阴影产生边框、Border边框和background多背景、Border边框和background-clip裁剪、Border images边框背景五种方法实现css多边框。

Outline轮廓和box-shadow元素的阴影产生边框

先看一个元素的阴影：

.drop-me {
  background: #AEA;
  box-shadow: 10px 12px 0.5rem rgba(0,0,0,0.5);
}

至此我们还是来温习一下box-shadow的语法：

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

当有多个阴影时，前面的阴影永远是最上面(第一个阴影在最上面)，假设一个元素的阴影没有偏移量，没有模糊半径，只有阴影扩散半径，它会在元素周围绘制出一个实线出来。

.drop-me{
   box-shadow: 0 0 0 5px #b22222;
}

再试试在阴影上再绘制一个轮廓：

.drop-me{
    box-shadow: 0 0 0 5px #b22222;
    outline: dashed 5px #00ced1;
}

如果希望在边框中使用三种色调效果，可以使用逗号分隔的列表创建多个框阴影，然后在其上方放置一个轮廓。例如：

.boxborder-me {
    box-shadow: 0 0 0 1px darkturquoise,
                0 0 0 3px firebrick,
                0 0 0 5px orange,
                0 0 0 6px darkturquoise;
    outline: dashed 6px darkturquoise;
}

如果再加一个border是怎么样的呢

.boxborder-me {
  box-shadow: 0 0 0 5px firebrick;
  outline: dashed 5px darkturquoise;
  border: solid 5px darkturquoise;
}

Border边框和box-shadow元素的阴影产生边框

说到border，也许有一种方法可以将border和box-shadow结合起来。毕竟，box-shadow还有一个inset阴影向内功能。那么，如果我们把之前的阴影inset向内，是不是又多了一个border？

.boxborder-me {
  box-shadow: 0 0 0 5px firebrick inset;
  border: dashed 5px darkturquoise;
}

Border边框和background多背景

如果我们将一些背景叠加在一起，从而在边框后面绘制出我们想要的纯色，会怎么样呢？

.multibg-me {
  border: 5px dashed firebrick;
  background:
    linear-gradient(to right, darkturquoise, 5px, transparent 5px);
  background-origin: border-box;
}

至此我们还是来温习一下渐变的语法：

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

我们可以看到，在左边，蓝色的背景可以通过红色虚线的透明部分看到。如果再添加三个方向这样的背景，又会怎么呢：

.multibg-me {
  border: 5px dashed firebrick;
  background:
    linear-gradient(to top, darkturquoise, 5px, transparent 5px),
    linear-gradient(to right, darkturquoise, 5px, transparent 5px),
    linear-gradient(to bottom, darkturquoise, 5px, transparent 5px),
    linear-gradient(to left, darkturquoise, 5px, transparent 5px);
  background-origin: border-box;
}

Border边框和background-clip裁剪

.multibg-me {
  border: 5px dashed firebrick;
  background: #EEE, darkturquoise;
  background-clip: padding-box, border-box;
}

但这不起作用，因为CSS要求只能将最后一个（因此也是最低的）背景设置为<color>值。任何其他背景层都必须是图像。

所以我们用从那个颜色到那个颜色的渐变来替换这个非常浅灰色的背景色，这是因为渐变是图像。换言之：

.multibg-me {
  border: 5px dashed firebrick;
  background: linear-gradient(to top, #EEE, #EEE), darkturquoise;
  background-clip: padding-box, border-box;
}

关于background-clip语法介绍可以看这里。

Border images边框背景

.borderimage-me {
  border: solid 5px;
  border-image: url(triple-stack-border.gif) 15 / 15px round;
}

首先，我们设置一个宽度有限的实线边框。我们还可以为后备目的设置颜色，但这不是必需的。然后我们指向一个图像URL，定义边界处的切片插入15和边界的宽度15px，最后是重复模式round。

CSS实现多边框技巧

CSS实现多边框技巧相关文章

网站标签聚合

最新文章