Are border gradients compatible with border-radius?
P粉824889650
2023-08-21 20:39:38
<p>I'm styling an input box with a rounded border (border-radius) and trying to add a gradient effect to the border. I can successfully create gradient and rounded borders, but not both at the same time. Either there are rounded corners but no gradient, or there is a gradient but no rounded corners. </p>
<pre class="brush:php;toolbar:false;">-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;</pre>
<p>Is there a way to have these two CSS properties take effect at the same time, or is this not possible? </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is possible, and requires no additional markup , but instead uses a
::afterpseudo-element .
It involves placing a pseudo-element with a gradient background underneath, and cropping it. This works in all current browsers without vendor prefixes or hacks (even IE), but if you want to support older versions of IE you should consider using solid color fallback, javascript and/or a custom MSIE CSS extensions (i.e.filter
This is a live example (, CSSPie-like vector tricks, etc.).jsfiddle version):
@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css'); html { /* 仅用于显示背景不需要是纯色的 */ background: linear-gradient(to right, #DDD 0%, #FFF 50%, #DDD 100%); padding: 10px; } .grounded-radiants { position: relative; border: 4px solid transparent; border-radius: 16px; background: linear-gradient(orange, violet); background-clip: padding-box; padding: 10px; /* 仅用于显示box-shadow仍然正常工作 */ box-shadow: 0 3px 9px black, inset 0 0 9px white; } .grounded-radiants::after { position: absolute; top: -4px; bottom: -4px; left: -4px; right: -4px; background: linear-gradient(red, blue); content: ''; z-index: -1; border-radius: 16px; }<p class="grounded-radiants"> 这里有一些文本。<br/> 这里甚至有一个换行！<br/> 太酷了。 </p>This works on any background-
It works well with - box-shadow
No need for you to add shadow to pseudo-element-
Again, this applies to IE, Firefox and Webkit/Blink browsers., with or withoutinsetProbably not possible, according to W3C specification:
This may be because
border-imagecan adopt some potentially complex patterns. If you want a circular image border, you need to create one yourself.