Pertanyaan Bug box-shadow dan border-radius di Chrome


Saya telah bereksperimen dengan CSS3 dan menemukan sesuatu yang aneh. Inilah bagian dari gaya DIV:

border:#446429 solid 1px;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-moz-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;
-webkit-box-shadow:3px 0px 15px #000000 inset,0px 3px 15px #000000 inset;

Rendering di Opera dan Firefox sama dan sempurna:

alt teks http://i47.tinypic.com/j8egp5.png

Tapi Chrome membuat bayangan di luar perbatasan:

alt teks http://i45.tinypic.com/5doykw.png

Apakah seharusnya begitu atau saya melewatkan sesuatu yang penting?


32
2018-05-30 06:15


asal


Jawaban:


Sepertinya bug yang dikenal:

http://code.google.com/p/chromium/issues/detail?id=29427

Lihat diskusi bug, Anda mungkin menemukan solusi. Pasti Bintangkan bug ini jika Anda ingin itu diperbaiki lebih cepat!


27
2018-05-30 06:24



Memasukkan inset shadow pertama yang memiliki warna yang sama dengan latar belakang tampaknya bekerja dengan baik tanpa menambahkan markup tambahan pada halaman Anda.

Misalnya. jika Anda memiliki halaman latar belakang putih:

-webkit-box-shadow:1px 1px 1px #fff inset,0px 0px 5px #333 inset;

6
2018-02-15 16:57



Saya baru saja menemukan perbaikan, tetapi perlu markup tambahan. Kita membutuhkan elemen tempat dengan sudut bulat dan bayangan bagian dalam ke wadah lain dengan sama tikungan bulat dan luapan tersembunyi.

<div class="foo"><div>Hello!</div></div>
<style type="text/css">
    .foo {-webkit-border-radius: 10px; overflow: hidden;}
    .foo div {-webkit-border-radius: 10px; -webkit-box-shadow: inset 1px 1px rgba(50%, 50%, 50%, .5);}
</style>

Diumumkan di atas memperbaiki dengan radius batas perbatasan perbatasan dan tidak dapat dibandingkan dengan gambar latar belakang di bawah elemen (karena warna perbatasan).

Terima kasih.


3
2017-12-30 13:43



Satu-satunya solusi yang saya lihat adalah menempatkan batas pada elemen dengan bayangan dan membuat batas itu lebih lebar daripada difusi bayangan. Jadi untuk bayangan inset seperti ini:

box-shadow:inset 0 0 7px #000;

Anda perlu menambahkan perbatasan seperti ini:

border:solid 7px #fff;

Ini adalah angka ketiga dalam deklarasi kotak-bayangan yang Anda butuhkan untuk mencocokkan (atau melebihi) dengan lebar pembatas. jika Anda tidak ingin batas lama yang besar pada elemen, Anda jelas harus membuat perbatasan dengan warna yang sama dengan latar belakang di belakangnya. Jadi solusi ini tidak banyak membantu jika elemen Anda di atas gambar berpola atau gradien. Tetapi pada warna yang solid itu bekerja dengan baik.


3
2017-11-15 19:24



Kabar baik! Sepertinya ada perbaikan. Inilah tiket di WebKit Bugzilla, ditandai sebagai diselesaikan / diperbaiki: https://bugs.webkit.org/show_bug.cgi?id=41576

Dan inilah komit pada batang di WebKit's Trac! http://trac.webkit.org/changeset/74089


1
2017-12-15 20:19



Coba ini -webkit-box-shadow: inset 0px 0 7px rgba (255, 242, 94, 0.4); menggunakan rgba tampaknya memperbaikinya.

Semoga berhasil!


0
2017-09-06 11:48



Menggunakan nilai negatif telah memecahkan masalah bagi saya.

-webkit-border-radius:10px;
-webkit-box-shadow: -1px -1px 2px #CCC;

0
2018-01-05 22:50



Bug ini telah diperbaiki dalam pembuatan kenari terbaru. :)


0
2018-01-08 08:35



Solusi Beth Fauld hampir berhasil, hanya ada sedikit kesalahan, seharusnya terlihat sebagai berikut:

-webkit-box-shadow:1px 1px 0px 1px #fff inset, 0px 0px 5px #333 inset;

Di mana #fff adalah warna latar belakang (di luar kotak), dan # 333 adalah warna bayangan.

Nilai ketiga dalam -webkit-box-shadow mendefinisikan ukuran buram, sementara yang keempat mendefinisikan ukuran bayangan (buram), jadi yang terakhir yang harus diatur ke 1px.


0
2018-03-16 09:41