logo标签列表

边框半径在图片上无效

htmlcss
7
这是我目前针对这张图片的代码：

在此输入图片描述

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;

但是这对我来说并没有解决圆角问题。非常感谢您的帮助。

1
你能展示一下 HTML 吗？ - Abdul Ahmad
1
尝试将图像放入一个 div 中，并在该 div 上应用边框半径。 - Enrico
1
FYI，它在这里可以运行：https://jsfiddle.net/ahmadabdul3/2u44tqzy/ - Abdul Ahmad
3个回答
8
您必须将div和图片嵌套在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>

最好的问候。
1

我刚刚遇到了这个问题。我将一张图片作为<div>的背景，但是边框半径似乎无法生效。这个<div>有两个部分——左侧和右侧。左侧部分有一张图片作为背景，而右侧则只有一个简单的bg-color。我在<div>上应用了overflow:hidden，问题迎刃而解！

0

Border-radius和border-image不是相同的，但是你可以通过使用::after伪元素来实现这个效果。

请查看更新后的fiddle: https://jsfiddle.net/2u44tqzy/1/

img {
    position: relative;
    border: 4px solid transparent;
    border-radius: 10px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}

img::after{
    position: absolute;
    top: -4px; 
    bottom: -4px;
    left: -4px; 
    right: -4px;
    background: linear-gradient(to bottom, #E2B0C7 0%, #BB96C2 100%);
    content: '';
    z-index: -1;
    border-radius: 16px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接