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
的缺點依然存在,就是只能模擬實線,不能模擬虛線

以上是H5行動端超實用的css3模擬邊框最新研究範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越基礎：H5代碼中的高級技術May 02, 2025 am 12:03 AM

H5的高級技巧包括：1.利用進行複雜圖形繪製，2.使用WebWorkers提升性能，3.通過WebStorage增強用戶體驗，4.實現響應式設計，5.利用WebRTC實現實時通信，6.進行性能優化和最佳實踐。這些技巧幫助開發者構建更動態、互動和高效的Web應用。

H5：網絡內容和設計的未來May 01, 2025 am 12:12 AM

H5（HTML5）將通過新元素和API提升網頁內容和設計。 1）H5增強了語義化標記和多媒體支持。 2）它引入了Canvas和SVG，豐富了網頁設計。 3）H5的工作原理是通過新標籤和API擴展HTML功能。 4）基本用法包括使用創建圖形，高級用法涉及WebStorageAPI。 5）開發者需注意瀏覽器兼容性和性能優化。

H5：網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力，極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5：HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進：1.語義化標籤提升了代碼清晰度和SEO效果；2.多媒體支持簡化了視頻和音頻嵌入；3.表單增強簡化了驗證；4.離線與本地存儲提高了用戶體驗；5.畫布與圖形功能增強了網頁的可視化效果。

HTML5：標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等，提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage，支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性，簡化處理和驗證。