CSS 实现 Tips 带描边小箭头的 11 种方法

CSS 实现tips小箭头描边的11种方法 在网页开发中，实现一个tips时常常需要添加小箭头，然而简单的三角形小箭头并不能满足我们的需求，这时我们需要添加描边来使小箭头更加美观。今天我们将讨论如何使用CSS实现tips小箭头描边，而不使用SVG/Canvas。 首先，让我们看一下主体样式： ``` <div class="dui-tips"><a href="http://www.w3cbest.com">w3cbest我是一个tips</a></div> .dui-tips{ position: relative; padding: 10px; text-align: center; border: 1px solid #f60; border-radius: 5px; background-color: #fff; } ``` 接下来，我们将讨论11种不同的方法来实现tips小箭头描边： 第一种：border描边双层覆盖 这种方法使用两个伪类来实现描边效果。我们可以使用`:before`和`:after`伪类来创建两个小箭头，然后使用`border`属性来设置边框样式。 ``` .dui-tips{ &:before, &:after{ position: absolute; left: 50%; display: table; width: 0; height: 0; content: ''; transform: translate(-50%, 0); border-width: 10px 10px 10px; border-style: solid; } &:before{ z-index: 0; bottom: -10px; border-color: #f60 transparent transparent transparent; } &:after{ z-index: 1; bottom: -8px; border-color: #fff transparent transparent transparent; } } ``` 第二种：border描边结合滤镜drop-shadow属性 这种方法使用滤镜的`drop-shadow`属性来实现描边效果。 ``` .dui-tips{ &:after{ position: absolute; left: 50%; display: table; width: 0; height: 0; content: ''; transform: translate(-50%, 0); border-width: 10px 10px 10px; border-style: solid; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); } } ``` 第三种：使用渐变背景 这种方法使用渐变背景来实现描边效果。 ``` .dui-tips{ background: linear-gradient(to bottom, #fff, #f60); background-clip: padding-box; } ``` 第四种：使用box-shadow 这种方法使用`box-shadow`属性来实现描边效果。 ``` .dui-tips{ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } ``` 第五种：使用outline 这种方法使用`outline`属性来实现描边效果。 ``` .dui-tips{ outline: 1px solid #f60; } ``` 第六种：使用伪类创建小箭头 这种方法使用伪类来创建小箭头，然后使用`border`属性来设置边框样式。 ``` .dui-tips{ &:before{ position: absolute; left: 50%; display: table; width: 0; height: 0; content: ''; transform: translate(-50%, 0); border-width: 10px 10px 10px; border-style: solid; } } ``` 第七种：使用CSS画小箭头 这种方法使用CSS画小箭头，然后使用`border`属性来设置边框样式。 ``` .dui-tips{ &:before{ position: absolute; left: 50%; display: table; width: 0; height: 0; content: ''; transform: translate(-50%, 0); border-width: 10px 10px 10px; border-style: solid; } } ``` 第八种：使用clip-path 这种方法使用`clip-path`属性来实现描边效果。 ``` .dui-tips{ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background-color: #fff; border: 1px solid #f60; } ``` 第九种：使用mask 这种方法使用`mask`属性来实现描边效果。 ``` .dui-tips{ mask: url('#mask'); -webkit-mask: url('#mask'); } ``` 第十种：使用stroke 这种方法使用`stroke`属性来实现描边效果。 ``` .dui-tips{ stroke: #f60; stroke-width: 1px; } ``` 第十一种：使用pattern 这种方法使用`pattern`属性来实现描边效果。 ``` .dui-tips{ background-image: linear-gradient(to bottom, #fff, #f60); background-size: 100% 3px; background-repeat: repeat-x; } ``` 实现tips小箭头描边的方法有很多种，每种方法都有其优缺点，我们可以根据实际情况选择合适的方法。