Rumah > Soal Jawab > teks badan
Saya mahu membuat bentuk separuh bulatan yang dipotong lutsinar menggunakan CSS3 sahaja. Satu-satunya syarat ialah semua elemen yang membentuk bentuk mestilah hitam atau lutsinar .
Saya tidak boleh menggunakan segi empat tepat hitam dengan bulatan putih di atasnya kerana separuh bulatan itu perlu telus dan biarkan latar belakang kelihatan melalui.
Bentuk yang diperlukan:
P粉1388714852023-10-23 14:34:32
Anda boleh menggunakan bayang kotak untuk membuat bulatan keratan telus:
body { background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat; background-size: cover; } div { display: inline-block; width: 300px; height: 300px; position: relative; overflow: hidden; } div:before { content: ''; position: absolute; bottom: 50%; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0px 300px 0px 300px #000; } .transparent { opacity: 0.5; }
Ini boleh menjadi responsif dengan peratusan panjang:
body { background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat; background-size: cover; } div { width: 40%; height: 300px; position: relative; overflow: hidden; } div:before { content: ''; position: absolute; bottom: 50%; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0px 300px 0px 300px #000; } .transparent { opacity: 0.5; }
P粉8514014752023-10-23 09:09:07
Mungkin anda boleh melakukan ini menggunakan CSS ::after
pseudo-properties seperti ini:
body { background: green; } .rect { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.5); position: relative; margin-top: 100px; margin-left: 100px; } .circle { display: block; width: 100px; height: 50px; top: -50px; left: 0; overflow: hidden; position: absolute; } .circle::after { content: ''; width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background: rgba(0, 0, 0, 0); position: absolute; top: -100px; left: -40px; border: 40px solid rgba(0, 0, 0, 0.5); }