Rumah hujung hadapan web html tutorial 如何使用CSS3实现书页(书本)卷角效果_html/css_WEB-ITnose

如何使用CSS3实现书页(书本)卷角效果_html/css_WEB-ITnose

Jun 24, 2016 am 11:24 AM

我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。

我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度倾斜的阴影效果来模拟。

用CSS3的伪元素实现这个效果很容易。


先给出一个实例,我们在WOW站点页面左边栏实现了如下的效果(红框内):



我们再来看看具体实现。

首先创建一个div元素容纳文本信息(可以包含更多元素),class取名为“狗耳朵”也就是卷角的意思:

<div class="dog-eared-tip">put your tips here</div>
Salin selepas log masuk

然后编写如下的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;}
Salin selepas log masuk

上面的代码首先设置了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

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah tujuan & lt; kemajuan & gt; unsur? Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

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

Apakah tujuan & lt; DATALIST & GT; unsur? Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

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

Adakah HTML mudah belajar untuk pemula? Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

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.

Apakah tujuan & lt; meter & gt; unsur? Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

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

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

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.

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

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.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

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.

Apakah contoh tag permulaan dalam html? Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

See all articles