当前位置：首页 > news >正文

CSS Border 三角形阴影与多重边框的制作

news 来源：原创 2025/5/7 8:02:51

CSS Border 三角形阴影与多重边框的制作

在现代网页设计中，CSS的强大功能让设计师和开发者能够创造出丰富多彩的视觉效果。本文将深入探讨如何利用CSS的border属性制作三角形阴影以及多重边框效果。这些技巧不仅能提升页面的美观度，还能增强用户体验。

Border的基础知识

首先，我们需要了解border的基本用法。border的完整写法包括三个部分：border-width、border-style和border-color。

border-width：边框宽度，不能为百分比，因为不会根据设备宽度改变。同理，outline、text-shadow和box-shadow也不支持百分比。
border-style：边框样式，常用的有solid（实线）、dashed（虚线）和dotted（点状线）。
border-color：边框颜色，默认颜色是元素的文本颜色，如果没有设置，则从父元素继承文本颜色。

边框可以根据方向单独设置，如border-top、border-bottom、border-left和border-right。每个方向还可以进一步细分为宽度、样式和颜色，例如border-top-width、border-top-style和border-top-color。

此外，border-width、border-style和border-color都可以采用组合写法，例如：

border-width: 10px 20px 30px 40px; /* 上 右 下 左 */
border-style: solid dashed dotted solid;
border-color: #f00 #0f0 #00f #0ff;

利用Border制作图形

边框的交界处是斜线，利用这一特性可以制作各种图形，特别是三角形。原理很简单：通过控制四个方向的边框颜色，可以实现三角形的制作。再通过调整宽度，可以制作出不同角度的三角形。

例如，制作一个三角形：

.triangle {border-style: solid;border-width: 30px 50px 60px 80px;border-color: #f00 #0f0 #00f #0ff;width: 0;margin: 100px;
}

为了更直观地理解，我们可以根据方向来写三角形：

.triangle {border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #0ff;
}

小三角的阴影

制作三角形后，我们可能会需要为其添加阴影。直接使用box-shadow会发现阴影并不符合预期，因为box-shadow是为矩形元素设计的。

方法一：添加一个辅助元素，制作一个相同形状的三角形，设置较低层级，并应用滤镜效果。

<style>.note {margin: 100px;width: 200px;height: 80px;background: #f60;position: relative;border-radius: 5px;box-shadow: 0 0 10px 0px #000;}.triangle {border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f60;position: absolute;top: -10px;left: 50%;margin-left: -10px;}.filter {border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #000;position: absolute;top: -10px;left: 50%;margin-left: -10px;z-index: -1;filter: blur(2px);}
</style>
<div class="wrapper"><div class="note"><span class="triangle"></span><span class="filter"></span></div>
</div>

方法二：使用filter的drop-shadow属性。

<style>.note {margin: 100px;width: 200px;height: 80px;background: #f60;position: relative;border-radius: 5px;filter: drop-shadow(0 0 6px #000);}.triangle {border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f60;position: absolute;top: -10px;left: 50%;margin-left: -10px;}
</style>
<div class="wrapper"><div class="note"><span class="triangle"></span></div>
</div>

小三角的边框

同理，三角形的边框也可以通过添加辅助元素来实现。使用::after和::before伪元素可以简化代码。

<style>.note {margin: 100px;width: 200px;height: 80px;background: #f0f;position: relative;border-radius: 5px;border: 1px solid #000;}.note:after {content: "";border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #f0f;position: absolute;top: -10px;left: 50%;margin-left: -10px;}.note:before {content: "";border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #000;position: absolute;top: -11px;left: 50%;margin-left: -10px;z-index: -1;}
</style>
<div class="wrapper"><div class="note"></div>
</div>

Border-Radius圆角

border-radius是CSS3中用于设置元素圆角的属性，支持四个角使用不同弧度，方向依次是左上、右上、右下、左下。

.test {width: 200px;height: 80px;margin: 100px;background: #f0f;border-radius: 15px 20px 35px 50px / 10% 25% 1em 50%;
}

最常见的是将值设为50%及以上，制作圆形。

多重边框

使用Outline：outline可以制作多重边框，但最多只能两层，且不支持弧形。

.test {margin: 100px;width: 200px;height: 80px;border: 10px solid #f0f;outline: 15px solid #f90;outline-offset: -25px;
}

使用Box-Shadow：box-shadow可以制作多层边框，且支持弧形。

.test {margin: 100px;width: 200px;height: 80px;border: 10px solid #f0f;border-radius: 25% 30% 50% 29%;box-shadow: 0 0 0 10px #0f0, 0 0 0 20px #ff0, 0 0 0 10px #0ff inset;
}