在div的边界级别应用渐变效果

Question

我正在尝试使用css为两个颜色插入边框级别的div提供渐变效果。但我无法得到与示例中所示相同的效果。渐变效果应该是从sqaure区域的顶部到中间。 我确实在图像中标记了渐变效果区域。

Answer 1

请检查此代码

.box {
    margin: 50px auto;
    width: 250px;
    height: 250px;
    padding: 20px;
    border-top: 10px solid #3e3ad5;
    border-bottom: 10px solid #d53a3a;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    -webkit-background-size: 10px 100%;
    -moz-background-size: 10px 100%;
    background-size: 10px 100%;
    background-image: -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%), -webkit-linear-gradient(top, #3e3ad5 0%, #d53a3a 100%);
    background-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%), -o-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
    background-image: linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%), linear-gradient(to bottom, #3e3ad5 0%, #d53a3a 100%);
}

<div class="box"><span>Border Gradient</span></div>