Adakah kecerunan sempadan serasi dengan jejari sempadan?

Question

Saya menggayakan kotak input dengan sempadan bulat (jejari sempadan) dan cuba menambah kesan kecerunan pada sempadan. 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,00,0100%, from(#b0bbc4),to(#ce

P粉418854048 · Answer

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

这里有一些文本。
这里甚至有一个换行！
太酷了。

Penggayaan tambahan di atas untuk ditunjukkan:

box-shadow一起工作得很好，无论是否使用inset

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

P粉710454910 · Answer

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.