如何在CSS中創建具有漸變不透明性的邊框？

Question

是否可以具有內部為不透明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;
}

Answer 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/