Question

这是我目前对此图片的代码

border-radius: 10px;
border: 3px solid transparent;
-moz-border-image: -moz-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
-webkit-border-image: -webkit-linear-gradient(top, #E2B0C7 0%, #BB96C2 100%);
border-image: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
border-image-slice: 10;

我试图通过使用：

来绕过边角

border-radius: 10px;

但这并不是我的角落。任何帮助表示赞赏。提前谢谢。

Answer 1

你必须将div和image用于div。喜欢这个代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        div {
            background: linear-gradient(#ff0000 0%, #b200ff 50%, #ff0000 100%);
            padding: 10px;
            display: inline-block;
            border-radius: 20px;
        }
        img {
            width: 500px;
            border-radius: 20px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <img src="FK8.jpg" />
    </div>
</body>
</html>

最好的问候。

Answer 2

边界半径和边界图像不一样;但是，你可以使用:: after伪元素。

请参阅更新的小提琴：https://jsfiddle.net/2u44tqzy/1/

codecs.open

边框半径不适用于图像

2 个答案: