border-imageにborder-radiusがきかないので擬似的に表現する
枠線（border）にグラデーションをつける
ミフネWEBネットショップのトップページにも使っていますが、cssのborde-imageに linear-gradientをつかってグラデーション枠をつけることができます。
見本で載せるとこんなのです。
border-image:linear-gradient(135deg,tomato,blue);
border-image-width:10px;
border-image-slice:1;
border-image-width:10px;
border-image-slice:1;
詳しい説明するとかなり長くなるので省略します。（いつかちゃんと書きたい）
border-imageにborder-radiusがきかない
で、たとえばこれの角に丸みをつけようとすると、border-radius : を使えばいいんじゃない？ と思うところなんですが、残念ながらborder-imageにborder-radiusは効きません。
そういうわけで仕方がないので、疑似要素を使って擬似的なborder-image-radius（←こんな要素はありません。念の為。）を表現します。
先ほどのborder-image はいったん忘れてください。
HTML
<div></div>
CSS
div{
width: 150px;
height: 150px;
background-color: #fff;
border-radius: 20px;
position: relative;
}
div:: after{
content: “”;
position: absolute;
top: -10px;
right: -10px;
bottom: -10px;
left: -10px;
background: linear-gradient(135deg, tomato, blue);
border-radius: 20px;
z-index: -1;
}
こちらも表示例を載せようと思ったのですが、またしてもWordpressの何かが邪魔しているようです。わざわざphp触るのも面倒なのでcodepen 載せておきます。
広告
