css3 boder边框设置渐变颜色后，圆角无效

你好，我的代码如下，这样设置后 border-radius无效。想请教一下如何是边框圆角圆润。谢谢了。
a {
    display: inline-block;
    font-size: 14px;
    color: #a81c2e;

/\* 渐变色 \*/

    border: 1px solid;
    border-image:linear- gradient(to right, #9f1a2c, #012069);
    border-image-slice: 10%;
    padding: 15px 40px;
    margin-bottom: 40px;
   border-radius: 5px;
}

html5 css3

阅读 10k

3 个回答

顾昀峰

✓ 已被采纳

border-image 和 border-radius不能同时使用会冲突，你想实现就用伪类
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a {
            position: relative;
            display: inline-block;
            font-size: 14px;
            color: #a81c2e;
            border: 1px solid;
            border-radius: 5px;
            padding: 15px 40px;
        }
        
        a:before {
            position: absolute;
            width: 98%;
            height: 100%;
            content: '';
            display: block;
            border: 1px solid;
            border-image: linear-gradient(to right, #9f1a2c, #012069);
            -webkit-border-image: linear-gradient(to right, #9f1a2c, #012069);
            -o-border-image: linear-gradient(to right, #9f1a2c, #012069);
            border-image-slice: 10%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    </style>
</head>

<body>
    <a>渐变色</a>
</body>

</html>