CSS: gardient border + border-radius -
is possible create gradient borders combined border radius?
i created button ::after
element
button{ background: -webkit-gradient ... } button::after{ content: ''; position: absolute; height: calc(100% - 2px); width: calc(100% - 2px); left: 1px; top: 1px; background: rgba(16,20,28,1); border-radius: 40px; z-index: -1; }
which looks like:
the problem inner element should transparent. if background-color
property of button
set transparent
, button takes on color (gardiet) of ::after
element:
i have found following picture on internet inner body transparent , border gradient.
there multiple tricks such border these don't support border-radius
.
a posibility, limited in support modern browsers (all major browser except ie) , limited colors can achieve, use mix-blend-mode, can make gray transparent.
also, special properties border, begin with
body { background-color: lightgreen; } .test { font-size: 30px; border-radius: 1em; border: solid 12px transparent; width: 200px; background: linear-gradient(gray,gray), linear-gradient(to right, red, blue); background-clip: content-box, border-box; background-origin: border-box; mix-blend-mode: hard-light; }
<div class="test">test</div>
Comments
Post a Comment