H5移动端超实用的css3模拟边框最新研究示例代码

前言

在之前写的一篇博文《移动端H5的一些基本知识点总结第五节边框的处理》中,我提到,可以使用 box-shadow:0 0 0 1px #ddd; 这样的方式,来模拟边框.当然,博文中的内容并没有错,但是却有一定的局限性.因此,今天在这里,纠正和完善我之前的博文中的缺陷.

为什么要模拟边框,而不是直接写边框?
因为边框要计算盒子模型.而我们在移动端可能使用的是自适应布局的方式.这样计算边框很费劲.
因此,使用模拟边框的方法,就可以不用考虑边框的宽度的问题了,这样更加方便.
当然,使用 box-sizing:border-box 这样的属性也可以将边框不计算在盒子模型里.
而且这种方法在很多现代CSS框架上都使用着.
但是我个人不推荐这种做法.因为,这样padding也不计算在盒子模型里面了.
反正我不喜欢这样的做法.所以我就模拟边框啦!

前文回顾

如果你不愿意去打开上面的链接,看下上一篇博文中说了什么.这里我就把两种关键的模拟方法给总结出来.如果不理解,可以去看,如果理解,就直接看下面的内容.

方法一 outline 模拟边框

使用 outline: 1px solid #ddd; 这样的描边线的方式模拟边框

优点:
1. 可以和 border 一样使用各种线形
2. 可以调整边框到盒子的距离 outline-offset 参数

缺点:
1. 不能做成贴合圆角元素(这被W3C认为是一个BUG,可能在不远的将来修复)
2. 只能一下子加到四边,不能只加一边.

方法二 box-shadow 模拟边框

使用 box-shadow:0 0 0 1px #ddd; 外发光模拟边框

优点:
1. 可以贴合圆角元素,生成完美的边框
2. 可以重复参数,生成多条边框

缺点:
1. 只有实线线性,不能做虚线

更多请看我前面的博文,或者百度相关信息.

`box-shadow` 可以模拟任意边的边框

我原来以为是做不到的.可见我的CSS功底还是不够强,还要努力学习呀.

上次我闲来无事,用一个p写了一套字母数字表查看DEMO.虽然用到了相关的知识点,但是还是没有往模拟边框的这条思路上靠.

今天仔细一想,原来 box-shadow 是可以模拟四条边中的任意一条边的.因此,才写下这篇博文.

语言太多,都不如直接看代码:

html代码

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body>
    <p class="box sibian"></p>
    <p class="box shangbian"></p>
    <p class="box xibian"></p>
    <p class="box zuobian"></p>
    <p class="box youbian"></p>
    <p class="box zuoshangbian"></p>
    <p class="box youshangbian"></p>
    <p class="box zuoxiabian"></p>
    <p class="box youxiabian"></p>
    <p class="box wushangbian"></p>
    <p class="box wuyoubian"></p>
    <p class="box wuxiabian"></p>
    <p class="box wuzuobian"></p></body></html>

CSS代码

.box {width: 100px;
height: 100px;background: #f00; 
margin: 50px;float: left;}
.sibian {box-shadow: 0 0 0 5px #000;}
.shangbian {box-shadow: 0 -5px #000;}
.xibian {box-shadow: 0 5px #000;}
.zuobian {box-shadow: -5px 0 #000;}
.youbian {box-shadow: 5px 0 #000;}
.zuoshangbian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000;}
.youshangbian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000;}
.zuoxiabian {box-shadow: -5px 5px #000,-5px 0 #000,0 5px #000;}
.youxiabian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000;}
.wushangbian {box-shadow: 5px 5px #000,5px 0 #000,0 5px #000,-5px 5px #000,-5px 0 #000;}
.wuyoubian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,-5px 5px #000,0 5px #000;}
.wuxiabian {box-shadow: -5px -5px #000,-5px 0 #000,0 -5px #000,5px -5px #000,5px 0 #000;}
.wuzuobian {box-shadow: 5px -5px #000,5px 0 #000,0 -5px #000,5px 5px #000,0 5px #000;}

查看box-shadow模拟边框DEMO

总结

利用了 box-shadow 的属性可以无限重复特性,可以通过不断的填充,来满足我们的需求.
并且, box-shadow 可以只设置两个值,这样就没有扩展,没有虚化,一比一的移动.
box-shadow 的缺点依然存在,就是只能模拟实线,不能模拟虚线
在圆角的运用上,需要更好的计算,反正是利用多重覆盖的特性
做1px的边框,是最简单的.

Atas ialah kandungan terperinci H5移动端超实用的css3模拟边框最新研究示例代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan

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

Artikel Berkaitan

Beyond Basics: Teknik Lanjutan dalam Kod H5May 02, 2025 am 12:03 AM

Petua lanjutan untuk H5 termasuk: 1. Gunakan grafik kompleks untuk menarik, 2. Gunakan pekerja web untuk meningkatkan prestasi, 3. Meningkatkan pengalaman pengguna melalui WebStorage, 4. Melaksanakan reka bentuk responsif, 5. Gunakan WebRTC untuk mencapai komunikasi masa nyata, 6 Melaksanakan pengoptimuman prestasi dan amalan terbaik. Petua ini membantu pemaju membina aplikasi web yang lebih dinamik, interaktif dan cekap.

H5: Masa Depan Kandungan dan Reka Bentuk WebMay 01, 2025 am 12:12 AM

H5 (HTML5) akan meningkatkan kandungan dan reka bentuk web melalui elemen baru dan API. 1) H5 meningkatkan penandaan semantik dan sokongan multimedia. 2) Ia memperkenalkan kanvas dan SVG, memperkayakan reka bentuk web. 3) H5 berfungsi dengan memperluaskan fungsi HTML melalui tag baru dan API. 4) Penggunaan asas termasuk membuat grafik menggunakannya, dan penggunaan lanjutan melibatkan WebStorageAPI. 5) Pemaju perlu memberi perhatian kepada keserasian penyemak imbas dan pengoptimuman prestasi.

H5: Ciri dan keupayaan baru untuk Pembangunan WebApr 29, 2025 am 12:07 AM

H5 membawa beberapa fungsi dan keupayaan baru, meningkatkan kecekapan interaktiviti dan pembangunan laman web. 1. Tag semantik seperti meningkatkan SEO. 2. Sokongan multimedia memudahkan main balik audio dan video melalui dan tag. 3. Lukisan kanvas menyediakan alat lukisan grafik dinamik. 4. Penyimpanan Tempatan Memudahkan Penyimpanan Data melalui LocalStorage dan sessionStorage. 5. API Geolokasi memudahkan pembangunan perkhidmatan berasaskan lokasi.

H5: Penambahbaikan utama dalam HTML5Apr 28, 2025 am 12:26 AM

HTML5 membawa lima penambahbaikan utama: 1. Tag semantik meningkatkan kejelasan kod dan kesan SEO; 2. Sokongan multimedia memudahkan penyembuhan video dan audio; 3. Peningkatan Borang Memudahkan Pengesahan; 4. Offline dan storan tempatan meningkatkan pengalaman pengguna; 5. Fungsi kanvas dan grafik meningkatkan visualisasi laman web.

HTML5: Standard dan kesannya terhadap pembangunan webApr 27, 2025 am 12:12 AM

Ciri -ciri teras HTML5 termasuk tag semantik, sokongan multimedia, penyimpanan luar talian dan penyimpanan tempatan, dan peningkatan bentuk. 1. Tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Memudahkan penanaman multimedia dengan label. 3. Storan luar talian dan penyimpanan tempatan seperti ApplicationCache dan LocalStorage Sokongan Operasi Bebas Rangkaian dan Penyimpanan Data. 4. Peningkatan Borang Memperkenalkan Jenis Input dan Sifat Pengesahan Baru Untuk Memudahkan Pemprosesan dan Pengesahan.

Contoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AM

H5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.

Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AM

H5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.