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

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

通过以上方法，我们可以灵活运用CSS的border​属性，创造出丰富多彩的视觉效果，提升网页设计的层次感和用户体验。希望本文的分享能对你有所帮助，欢迎在实际项目中尝试和应用这些技巧。