Adakah kecerunan sempadan serasi dengan jejari sempadan?
P粉824889650
2023-08-21 20:39:38
<p>Saya sedang menggayakan kotak input dengan jidar bulat (jejari sempadan) dan cuba menambah kesan kecerunan pada jidar. Saya berjaya mencipta sempadan kecerunan dan bulat, tetapi tidak kedua-duanya pada masa yang sama. Sama ada terdapat bucu bulat tetapi tiada kecerunan, atau terdapat kecerunan tetapi tiada bucu bulat. </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 1 100%;</pre>
<p>Adakah terdapat cara untuk membolehkan kedua-dua sifat CSS ini berkuat kuasa pada masa yang sama, atau adakah ini tidak mungkin? </p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini boleh dilakukan dan tidak memerlukan penanda tambahan , sebaliknya menggunakan
::afterunsur pseudo .
Ia melibatkan meletakkan elemen pseudo dengan latar belakang kecerunan di bawahnya dan memangkasnya. Ini berfungsi dalam semua penyemak imbas semasa tanpa awalan atau penggodaman vendor (walaupun IE), tetapi jika anda ingin menyokong versi IE yang lebih lama, anda harus mempertimbangkan untuk menggunakan sandaran warna pepejal, javascript dan/atau sambungan MSIE CSS tersuai (iaitu
Berikut ialah contoh langsung (filter, vektor helah seperti CSSPie, dll.).versi jsfiddle):
@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>Ini berfungsi pada mana-mana latar belakang-
Ia sesuai dengan -
Anda tidak perlu menambah bayang-bayang pada elemen pseudo-
Sekali lagi, ini berfungsi dalam pelayar IE, Firefox dan Webkit/Blink.box-shadow一起工作得很好，无论是否使用insetMungkin tidak boleh, mengikut spec W3C:
Ini mungkin kerana
border-imagebeberapa corak yang berpotensi kompleks boleh diguna pakai. Jika anda mahukan sempadan imej bulat, anda perlu menciptanya sendiri.