兩種用CSS實現圓角邊框的方法

2021-05-25 20:23:48 字數 1661 閱讀 3484

圓角邊框可以用實現,也可以用css實現。如果用做的話,就畫好圓角然後設定成背景。用css不需要,直接用**定義顏色。用的話,會影響網頁開啟速度,當然如果不大,影響也並不明顯。用css不會影響網頁開啟速度,但是實現方法略麻煩,要寫不少**。不好講哪個更好哪個更差,用到各自適合的地方就行了。

這裡介紹兩種不用,直接用css實現圓角邊框的方法。兩種css方法原理類似,都是在乙個層上加二個或更多層,不過這些層只有左右邊線,上邊線和下邊線有背景色,都有一定的長度差距差,從而呈現出圓角邊框的效果。

方法一:

css樣式定義,放在網頁前部。綠色字是注釋,紅色字是可自行更改的顏色編碼。

>

引用以上定義的樣式,在網頁中顯示圓角邊框。綠色字是注釋。

>

>

>

>

>

>

>

>

>

>

>

>css圓角邊框,無實現方法

>

>

>

>

>

>

>

>

>

>

>

>

>

效果如圖所示:

方法二:

首先選擇一系列同色顏色,以便營造平滑的圓角效果

較深的藍色#0a67e6

略淺的藍色#3883ea

更淺的藍色#478dec

較淺的藍色#95bdf4

css樣式定義,放在網頁前部。紅色字是可自行更改的顏色編碼。

>

引用以上定義的樣式,在網頁中顯示圓角邊框。綠色字是注釋。

<

!--1.定義層,引用樣式,生成圓角邊框,直接拷貝即可--

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>css圓角邊框,無實現方法

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

>

效果如圖所示:

css用邊框實現圓角矩形

今天要做乙個圓角矩形的按鈕,於是直接找圓角矩形的css實現方式,搞了半天,雖然也實現效果了,但是很複雜,需要用很多 後來突然想到以前做過的乙個邊框效果,也是圓角矩形,於是找了出來,發現這種辦法相當簡單並且效果一點也不差,這裡簡要分享一下。關鍵部分都有注釋。html view plain copy h...

C 實現無邊框拖到的兩種方式

a 一種是使用windows api 先建立乙個專案演示一下 選擇窗體的屬性formborderstyle設定為 none 開啟窗體 需新增using system.runtime.interopservices 選擇窗體的滑鼠按下事件 並加入下列 dllimport user32.dll publ...

RMQ的兩種實現方法

st表實現rmq rmq演算法 range minimum maximum query 是求區間極值的高效演算法,依據所需實現的不同效能可以有多種寫法,這裡主要講基於線段樹和稀疏表 sparse table 的兩種方法 線段樹是維護區間的一類高效資料結構,依據這個特性,我們可以用線段樹實現rmq演算...