Adakah kecerunan sempadan serasi dengan jejari sempadan?

Question

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.

-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 membolehkan kedua-dua sifat CSS ini berkuat kuasa pada masa yang sama, atau adakah ini tidak mungkin?

Answer 1

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

filter, vektor helah seperti CSSPie, dll.).

Berikut ialah contoh langsung (

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>

Penggayaan tambahan di atas untuk ditunjukkan:

Ini berfungsi pada mana-mana latar belakang
Ia sesuai dengan
• box-shadow一起工作得很好，无论是否使用inset
Anda tidak perlu menambah bayang-bayang pada elemen pseudo

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

Answer 2

Mungkin tidak boleh, mengikut spec W3C:

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