Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Kesan 'Ekor Petua Alat' dengan CSS Tulen?
Konsep mencipta "tooltip tail" hanya menggunakan CSS adalah sesuatu yang menarik. Begini cara untuk mencapai kesan ini:
Contoh pertama mencipta kesan "tooltip tail" menggunakan manipulasi sempadan yang bijak:
HTML:
<div>Cool Trick: <div class="tooltiptail"></div> </div> <br> <div>How do I get this effect with only CSS? <div class="anothertail"></div> </div>
CSS:
.tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; }
Untuk menambah dimensi dan bayang pada hujung "ekor hujung alat," anda boleh menggunakan bayang kotak:
#tailShadow { position: absolute; bottom: -8px; left: 28px; width: 0; height: 0; border: solid 2px #fff; box-shadow: 0 0 10px 1px #555; }
Coretan berikut memastikan keserasian silang penyemak imbas untuk kesan bayang kotak:
#tailShadow { position: absolute; bottom: -8px; left: 28px; width: 0; height: 0; border: solid 2px #fff; -moz-box-shadow: 0 0 10px 1px #555; -webkit-box-shadow: 0 0 10px 1px #555; box-shadow: 0 0 10px 1px #555; }
Dengan teknik ini, anda boleh membuat "ekor petua alat" tersuai dalam CSS yang meningkatkan daya tarikan visual dan kefungsian elemen web anda.
Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Kesan 'Ekor Petua Alat' dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!