Cara menggunakan atribut css3 untuk memperkayakan gaya gambar (bucu bulat, bayang, kecerunan)_html5 kemahiran tutorial

Dalam CSS3, jika bayangan kotak dan jejari sempadan digunakan secara langsung pada imej, penyemak imbas tidak dapat memaparkannya dengan baik. Tetapi jika anda menggunakan imej sebagai imej latar belakang, pelayar gaya tambahan boleh menjadikannya dengan baik. Saya akan memperkenalkan cara menggunakan bayangan kotak, jejari sempadan dan peralihan untuk mencipta kesan gaya imej yang berbeza.
Masalah
Dengan melihat demo, kami dapat melihat bahawa kami menetapkan jejari sempadan dan bayangan kotak sebaris untuk baris pertama imej. Firefox memaparkan jejari sempadan imej, tetapi tidak memberikan bayangan kotak sebaris. Kedua-dua kesan tidak dipaparkan dalam chrome dan Safari.

Salin kod

Kod tersebut adalah seperti berikut:

.img biasa {
sempadan: padu 5px #000;
-jejari-sempadan-web: 20px;
-jejari-sempadan-moz: 20px; : inset 0 1px 5px rgba(0,0,0,.5); inset 0 1px 5px rgba(0,0,0,.5);
}



kesan firefox
:

chrome/safari


Penyelesaian
Untuk membolehkan jejari sempadan dan bayangan kotak sebaris berfungsi dengan betul, kita perlu menukar imej kepada imej latar belakang .

Kaedah dinamik
Untuk menyelesaikan kerja ini secara dinamik, kita perlu menggunakan jquery untuk menambah pembalut imej latar belakang pada setiap imej. Kod js berikut menambah pakej span pada setiap imej Laluan imej latar belakang span ialah laluan imej.
Kod ini agak mudah, saya rasa tidak perlu menjelaskannya. Jika anda tidak pasti, anda boleh terus menyemak API jquery.



Salin kod

Kod tersebut adalah seperti berikut:

• AlloyTouch全屏滚动插件 30秒搞定顺滑H5页
• HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
• HTML5 canvas 9绘制图片实例详解
• 正则表达式与HTML5新元素
• NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法