Saya sedang mereka bentuk medan input dengan sempadan bulat (jejari sempadan) dan cuba menambah kecerunan pada sempadan tersebut. Saya berjaya membuat kecerunan dan sempadan bulat, tetapi kedua-duanya tidak berfungsi bersama. Ia sama ada bucu bulat tanpa kecerunan, atau sempadan dengan kecerunan tetapi tiada bucu bulat.
-webkit-border-radius: 5px; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 1 100%;
Adakah terdapat cara untuk menjadikan dua sifat CSS berfungsi bersama, atau adakah ini tidak boleh dilakukan?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ini mungkin, dan iatidak memerlukan penanda tambahantetapi menggunakan
Ia melibatkan meletakkan elemen pseudo dengan latar belakang kecerunan di bawah dan memangkasnya. Ini berfungsi untuk semua penyemak imbas yang pada masa ini tidak mempunyai awalan atau penggodaman vendor (walaupun IE), tetapi jika anda ingin menyokong versi retro IE, anda harus mempertimbangkan sandaran warna pepejal, javascript dan/atau sambungan CSS MSIE tersuai (iaitu::afterunsur pseudo.
Berikut ialah contoh (过滤器, CSSPie - seperti vektor spoofing, dll.).versi jsfiddle):
@import url('//raw.githubusercontent.com/necolas/normalize.css/master/normalize.css'); html { /* just for showing that background doesn't need to be solid */ 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; /* just to show box-shadow still works fine */ 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; }Ini berfungsi pada mana-mana latar belakang Berfungsi dengan baik dengan atau tanpa
Sekali lagi, ini berfungsi dalam pelayar IE, Firefox dan Webkit/Blink.box-shadow、insetSetiap spesifikasi W3C, ia mungkin tidak mungkin:
Ini mungkin kerana
border-imageterdapat beberapa corak yang berpotensi kompleks yang boleh diguna pakai. Jika anda mahukan sempadan imej bulat, anda perlu menciptanya sendiri.