如何使用CSS3实现书页(书本)卷角效果_html/css_WEB-ITnose
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。
我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。
用CSS3的伪元素实现这个效果很容易。
先给出一个实例,我们在WOW站点页面左边栏实现了如下的效果(红框内):
我们再来看看具体实现。
首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:
<div class="dog-eared-tip">put your tips here</div>
然后编写如下的CSS代码:
.dog-eared-tip{ padding: 7.5px 5px 7.5px 20px; background: #DEAA2F; font-size: 13px; position: absolute; text-align: center; width: 100%; color: black;}.dog-eared_tip:before, .work_tip:after { content: "\f0eb"; position: absolute; z-index: -2; -moz-transform: rotate(-3deg); -webkit-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); bottom: 15px; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); height: 50%; left: 10px; max-height: 100px; max-width: 300px; width: 50%;}.dog-eared_tip:after { -moz-transform: rotate(3deg); -webkit-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); left: auto; right: 10px;}
上面的代码首先设置了div的常用样式如底色、字体、居中、边距等。
然后为该div的:before和:after伪元素设置框阴影(box-shadow)和小角度旋转(rotate方法),
并把before和after的位置放在div的底部,并且z序列为负数,这样的实际效果就是伪元素本身被div所遮挡,但是刚好使得其外围阴影部分露出底部。
注意,这里请记得不要给div设置overflow不可见的样式,否则阴影不可见。
基本上好了,还差最后一步,两边阴影的倾斜度在物理学上是对称的,所以我们还需要调整一下:after伪元素的倾斜角度(-3°调整为3°)。
这样:before对应于标签的左下边角,:after对应于标签的右下边角的卷曲阴影。
本例在IE11/Chrome/FF/Edge下可以工作。
by iefreer

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas



Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.
