9个很棒的CSS边框技巧( 二 ) _CSS

#box {font-family: Arial;font-size: 18px;line-height: 30px;font-weight: bold;color: white;padding: 40px;box-shadow:0 0 0 1px #009688,0 0 0 5px #F44336,0 0 0 9px #673AB7,0 0 0 10px #009688;outline: dashed 10px #009688;}效果

文章插图

8.带有阴影的双CSS边框我们也可以混合一些 box-shadow 和 outline 的边框。
这将创建一个漂亮的带尖刺的线条效果，如下例所示。
让我们检查一下代码！

#box {font-family: Arial;font-size: 18px;line-height: 30px;font-weight: bold;color: white;padding: 40px;box-shadow: 0 0 0 10px #009688;border: 10px solid #009688;outline: dashed 10px white;}

效果

文章插图

9.多色CSS边框如果我们想给边框加上比前面的示例更多的颜色怎么办？
我们甚至可以将元素的每一面都设置为不同的颜色。
为此，我们将需要一些带有渐变的自定义背景。
看下面的例子。

#box {font-family: Arial;font-size: 18px;line-height: 30px;font-weight: bold;color: white;padding: 40px;background:linear-gradient(to top, #4caf50, #4caf50 10px, transparent 10px),linear-gradient(to right, #c1ef8c, #c1ef8c 10px, transparent 10px),linear-gradient(to bottom, #8bc34a, #8bc34a 10px, transparent 10px),linear-gradient(to left, #009688, #009688 10px, transparent 10px);background-origin: border-box;}

效果