如何在CSS中创建渐变不透明度的边框

How do I create a border with gradiant opacity in CSS ?

本文关键字：渐变 不透明度 边框 创建 CSS      更新时间：2023-09-26

是否可以有一个内部不透明度为1，外部不透明度为0的边界?

我想知道这个，因为我有这个小提琴:http://jsfiddle.net/q0ubpmwj/4/

我希望能够在轴上拖动矩形并看到它逐渐消失。

我找到了这个链接:http://www.hongkiat.com/blog/css-gradient-border/

但这不是一个从中心到外部的渐变，而是从上到下的渐变:

.box{
    width: 250px;
    height: 250px;
    background: #eee;
    border: 20px solid transparent;
    -moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    -webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
    border-image-slice: 1;
}

你可以使用方框阴影来模拟边框。

类似:

.box2{
    width: 200px;
    height: 100px;
    background: #eee;
    padding:20px;
    box-shadow:0px 0px 20px 4px #3acfd5,0px 0px 0px 20px #3a4ed5;
}
http://jsfiddle.net/y3z3q933/

相关文章：