で作業していないこれは私が現在、このイメージを持っているコードである私が使用して境界線の角を丸めるしようとしています
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;
しかし、それは私のためにコーナーを丸めていません。どんな助けもありがとうございます。前もって感謝します。
：
が更新フィドルを参照してください。 このコードのように
<!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>
お待ちしております。
ボーダー半径とボーダー画像は同じではありません。しかし、これを:: after擬似要素で動作させることができます。あなたはdiv要素の中にdiv要素や画像を使用する必要があります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;
}
あなたは私たちにhtmlを表示できますか？ –
div内に画像を配置し、div – Enrico
fyiにボーダー半径を適用してみましょう。ここで動作します：https://jsfiddle.net/ahmadabdul3/2u44tqzy/ –