Rumah >hujung hadapan web >tutorial css >Apa yang kita lakukan dengan bayang-bayang kotak
Apa yang kita lakukan dengan bayang-bayang kotak
- Linda Hamiltonasal
- 2024-12-29 14:29:11801semak imbas
Sesekali saya mendapat "fasa CSS". Yang terbaru bermula apabila saya menemui CSSBattle. Laman web ini mempunyai cabaran harian di mana anda perlu menghasilkan semula imej dengan CSS dengan jumlah aksara yang paling sedikit. Saya mengerikan, sangat bertele-tele, tetapi mesti saya katakan saya obses.
Salah satu perkara kegemaran saya ialah melihat penyelesaian orang lain, dan ini adalah cara saya mendapati bahawa rakan css-battlers saya yang lain banyak menggunakan box-shadow di sana, dan kemudian saya mendapat rasa ingin tahu yang hebat tentangnya. Mereka pada asasnya menggunakan sifat ini untuk meniru satu retangle selama-lamanya. Saya akan tunjukkan caranya.
Harta kotak-bayang
Terdapat banyak pengaturan untuk hartanah ini, mengikut dokumentasi. Tetapi yang kami gunakan di sini adalah warna kiri atas. Jadi, sebagai contoh:
(Sasaran harian CSSBattle untuk 16/11/2024)
Dalam imej ini kita melihat hanya satu div; yang lain adalah bayang-bayang. Jadi, htmlnya ialah:
<html>
<body>
<div></div>
</body>
</html>
CSS ialah:
* {
background: #6592CF;
position: absolute;
}
div {
top: 52px;
left: 52px;
width: 70px;
height: 30px;
background: #EEB850;
box-shadow:
0 75px #243D83, 0 150px #EEB850,
105px 0 #243D83, 210px 0 #EEB850,
105px 75px #EEB850, 210px 75px #243D83,
105px 150px #243D83, 210px 150px #EEB850;
}
Perhatikan bahawa sifat atas dan kiri adalah dalam px, dan jarak adalah relatif kepada yang pertama.
Mungkin saya seorang sahaja, tetapi saya fikir ini sangat menarik. Saya akan menyambung pelajaran saya dalam CSS dan saya akan membenarkan anda jika saya menemui perkara menarik yang lain.
Atas ialah kandungan terperinci Apa yang kita lakukan dengan bayang-bayang kotak. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!