Bolehkah saya menggunakan jejari sempadan dengan imej sempadan dengan kecerunan?

Question

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?

Answer 1

Ini mungkin, dan ia tidak memerlukan penanda tambahan tetapi menggunakan ::after unsur pseudo .

                                                                                           

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

过滤器 , CSSPie - seperti vektor spoofing, dll.).

Berikut ialah contoh (

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;
}

<p class="grounded-radiants">
    Some text is here.<br/>
    There's even a line break!<br/>
    so cool.
</p>

Penggayaan tambahan di atas adalah untuk menunjukkan:

Ini berfungsi pada mana-mana latar belakang
Berfungsi dengan baik dengan atau tanpa
• box-shadow、inset
Anda tidak perlu menambah bayang pada elemen pseudo

Sekali lagi, ini berfungsi dalam pelayar IE, Firefox dan Webkit/Blink.

Answer 2

Setiap spesifikasi W3C, ia mungkin tidak mungkin:

Ini mungkin kerana border-image terdapat beberapa corak yang berpotensi kompleks yang boleh diguna pakai. Jika anda mahukan sempadan imej bulat, anda perlu menciptanya sendiri.