[分享]css两个边框怎么亮起来

当我们需要为元素添加两种不同颜色的边框时，可以使用CSS的两个属性：border和outline。下面我们来看一下如何实现这个效果：1. 使用border属性 .bordergradient { b...

当我们需要为元素添加两种不同颜色的边框时，可以使用CSS的两个属性：border和outline。下面我们来看一下如何实现这个效果：

1. 使用border属性

  .border-gradient {
        border: 3px solid;
        border-image: linear-gradient(to right, #45ba7d, #9be15d);
        border-image-slice: 1;
    } 

上述代码中，我们先使用border属性为元素添加一层宽度为3像素的实线边框。接着使用border-image属性为边框添加了一个线性渐变背景，起始颜色为#45ba7d，结束颜色为#9be15d。然后，我们使用border-image-slice属性将边框分割成9个小块，保留中间的一块显示渐变背景。

2. 使用outline属性

  .outline-gradient {
        outline: 3px solid;
        outline-offset: -3px;
        outline-color: #9be15d;
        box-shadow: 0 0 0 3px #45ba7d;
    } 

上述代码中，我们使用outline属性为元素添加一层宽度为3像素、颜色为#9be15d的实线边框。我们使用outline-offset属性将这个边框向内缩进3像素，与原始边框重合。接着，我们使用box-shadow属性为元素添加一个3像素的#45ba7d的阴影，同时使这个阴影的模糊度为0，让其只显示出边框的效果。

以上两种方式都可以实现双边框效果，但使用outline属性相比较更为简单，而且不需要为元素添加额外的DOM元素，不会占用过多资源。