border-radius以外的CSS圓角邊框制作方法

CSS3的border-radius
利用DIV+CSS生成圓角邊框,在很多情況下都會用到,目前DIV+CSS的圓角邊框,一種是利用CSS3,一種是利用布局模擬出圓角。
先說第一種,利用CSS3,前提是您的瀏覽器必須支持CSS3,F(xiàn)irefox3是支持的,我看到的很多網(wǎng)站圓角也是利用CSS3直接生成的,無非就是ie下依然顯示直角而已,讓ie固執(zhí)去吧。
利用CSS3,你可以指定4個角都是圓角,或者某一個角是圓角非常方便,代碼如下:
- #round {
- background-color: #000;
- border: 1px solid #000;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- color:#fff;
- }
- #indie {
- background-color: #000;
- border: 1px solid #000;
- -moz-border-radius-topright: 10px;
- -moz-border-radius-bottomright: 10px;
- -webkit-border-top-left-radius: 10px;
- -webkit-border-bottom-left-radius: 10px;
- color:#fff;
- }
<div id="round"><h1>圓角邊框</h1></div>
<div id="indie"><h1>部分圓角</h1></div>
不使用 border-radius 實現(xiàn)圓角
CSS3中,利用屬性 border-radius 可以很方便的設(shè)置出圓角矩形,但是在IE8及以下版本卻不支持這個屬性,為了在舊版本的瀏覽器中實現(xiàn)寬高自適應(yīng)的圓角矩形,可以采用以下三種方法。
1.使用背景圖片制作圓角
使用背景圖片制作寬、高自適應(yīng)的圓角矩形,首先需要切出4個圓角圖片,然后把4個圓角圖片放在矩形的四個角上就大功告成了,這一共需要5個div標(biāo)簽,1個容器div和4個圓角背景div。是不是很好理解。
具體實現(xiàn)來說,需要注意一些細(xì)節(jié)。對于矩形容器div:
上下內(nèi)邊距的大小至少設(shè)置為圓角的高度。
position設(shè)置為相對定位。
放置內(nèi)容。
對于4個圓角背景div:
分別設(shè)置各個圓角背景圖片。
絕對定位于容器矩形的四個角。
需要設(shè)置寬高值才能顯示背景圖片。
假設(shè)圓角圖片的寬高是5px,具體代碼如下:
- <div class="content">
- <div class="top-left"></div>
- <div class="top-right"></div>
- <div class="btm-left"></div>
- <div class="btm-right"></div>
- </div>
- .content {
- position: relative;
- padding: 5px;
- }
- .top-left,
- .top-rightright,
- .btm-left,
- .btm-rightright {
- position: absolute;
- width: 5px;
- height: 5px;
- }
- .top-left {
- top: 0;
- left: 0;
- background: url(imgs/top-left.png) no-repeat top left;
- }
- .top-rightright {
- top: 0;
- rightright: 0;
- background: url(imgs/top-rightright.png) no-repeat top left;
- }
- .btm-left {
- bottombottom: 0;
- left: 0;
- background: url(imgs/btm-left.png) no-repeat top left;
- }
- .btm-rightright {
- bottombottom: 0;
- rightright: 0;
- background: url(imgs/btm-rightright.png) no-repeat top left;
- }
2.純 CSS+div 制作圓角矩形
這種方法的原理是利用像素點繪制弧線來模擬圓角。簡單起見,這里我用圓角半徑為3px的例子講解,其中圓角矩形的背景色為粉色,矩形的邊框為黑色。左上角圓角放大后如下圖所示:
這里矩形上下各需要3個高度為1px、垂直羅在一起的div才能模擬出圓角。具體實現(xiàn)如下:
第一個div就是上面圖中矩形的黑色上邊框,因為模擬的圓角半徑為3px,所以該div的左右外邊距設(shè)為3px,背景色設(shè)為黑色。
第二個div的左右外邊距設(shè)為2px,左右邊框為1px的黑線,背景色為粉色。
第三個div的左右外邊距設(shè)為1px,左右邊框為1px的黑線,背景色為粉色。
圓角矩形下面的兩個圓角是以上三個div反序排列。
矩形內(nèi)容區(qū)域的div只需要設(shè)置左右邊框和背景色即可。
具體代碼如下
- <div class="wrapper">
- <div class="r1"></div>
- <div class="r2"></div>
- <div class="r3"></div>
- <div class="content">aaaaa</div>
- <div class="r3"></div>
- <div class="r2"></div>
- <div class="r1"></div>
- </div>
- .r1 {
- height: 1px;
- margin: 0 3px;
- background-color: #111;
- }
- .r2 {
- height: 1px;
- margin: 0 2px;
- background-color: #f4b4b4;
- border-left: 1px solid #111;
- border-right: 1px solid #111;
- }
- .r3 {
- height: 1px;
- margin: 0 1px;
- background-color: #f4b4b4;
- border-left: 1px solid #111;
- border-right: 1px solid #111;
- }
- .content {
- background-color: #f4b4b4;
- border-left: 1px solid #111;
- border-right: 1px solid #111;
- }
此方法優(yōu)缺點分析:
不使用背景圖片,減少了HTTP請求數(shù)。
后期維護(hù)性好,但是圓角矩形像素增加,無意義的div代碼將成倍增加。
實現(xiàn)的圓角矩形有局限性。
只能實現(xiàn)純色圓角。
3.使用CSS border 畫出梯形模擬圓角
通過設(shè)置border屬性,可以得到梯形和三角形,效果如下圖所示:
當(dāng)給div的四個邊框設(shè)置比較大的寬度值時,就能得到四個梯形,如上圖中的第一個圖案;
在此基礎(chǔ)上,當(dāng)把div的高度值設(shè)為0后,就能得到梯形和等腰三角形了,如上圖中的第二個圖案;
當(dāng)把div的寬、高都設(shè)為0,且只設(shè)置上、左的兩個邊框時,就能得到兩個直角三角形,圖中的第三個圖案就是這種情況;
在此基礎(chǔ)上,把其中的一個邊框的顏色設(shè)置為透明,就能像第四個圖案一樣得到一個直角三角形。
代碼如下:
- <div class="box1"></div>
- <div class="box2"></div>
- <div class="box3"></div>
- <div class="box4"></div>
- .box1 {
- height: 20px;
- width: 20px;
- border-top: 20px solid red;
- border-right: 20px solid green;
- border-bottom: 20px solid blue;
- border-left: 20px solid yellow;
- }
- .box2 {
- height: 0;
- width: 20px;
- border-top: 20px solid red;
- border-right: 20px solid green;
- border-bottom: 20px solid blue;
- border-left: 20px solid yellow;
- }
- .box3 {
- height: 0;
- width: 0;
- border-top: 50px solid red;
- /* border-right: 20px solid green; */
- /* border-bottom: 20px solid blue; */
- border-left: 50px solid yellow;
- }
- .box4 {
- height: 0;
- width: 0;
- border-top: 50px solid red;
- /* border-right: 20px solid green; */
- /* border-bottom: 20px solid blue; */
- border-left: 50px solid transparent;
- }
已經(jīng)知道了如何通過 border 畫出梯形了,那又該如何利用梯形模擬圓角矩形呢?很簡單,只要在矩形的上面和下面各放上一個梯形,就能得到圓角矩形了。原理嘛就是利用梯形的左右兩個斜邊模擬圓角啦,直接上效果圖:
具體代碼如下:
- <div class="wrapper">
- <div class="top"></div>
- <div class="content">
- <p>利用border畫出梯形,模擬圓角</p>
- </div>
- <div class="bottom"></div>
- </div>
CSS Code復(fù)制內(nèi)容到剪貼板
- div {
- box-sizing: border-box;
- }
- .top {
- height: 0;
- border-top: 3px solid transparent;
- border-bottom: 3px solid #111;
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- }
- .bottombottom {
- height: 0;
- border-top: 3px solid #111;
- border-bottom: 3px solid transparent;
- border-left: 3px solid transparent;
- border-right: 3px solid transparent;
- }
- .content {
- color: #fff;
- background-color: #111;
- }
- .wrapper {
- width: 200px;
- margin: 0 auto;
- }
相關(guān)文章
CSS3 border-radius圓角的實現(xiàn)方法及用法詳解
這篇文章主要介紹了CSS3 border-radius圓角的實現(xiàn)方法及用法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-09-14使用CSS的border-radius屬性 設(shè)置圓弧
這篇文章主要介紹了使用CSS的border-radius屬性 設(shè)置圓弧,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-26- 這篇文章主要介紹了css3 border-radius屬性詳解,這里整理了詳細(xì)的代碼資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-07-05
CSS3 border-radius(圓角)效果在線調(diào)試工具
這是一款可在線調(diào)試并預(yù)覽CSS3 border-radius(圓角)效果的工具。右側(cè)具有實時調(diào)試并顯示預(yù)覽效果的功能,同時能夠?qū)崟r生成對應(yīng)的css3效果代碼,方便需要的朋友使用。2016-05-31利用CSS3的border-radius繪制太極及愛心圖案示例
CSS3中的border-radius可以輕松地用來繪制弧線,如果只用來做圓角矩形的話可就太浪費了,下面就來展示一下利用CSS3的border-radius繪制太極及愛心圖案示例,需要的朋友可以參2016-05-17CSS3中border-radius屬性設(shè)定圓角的使用技巧
這篇文章主要介紹了CSS3中border-radius屬性設(shè)定圓角的使用技巧,border-radius的作用不止是最常用的圓角矩形,我們還可以利用它設(shè)置弧度來制作其他弧線邊框圖形,需要的朋友2016-05-10- 這篇文章主要介紹了實例講解CSS3中的border-radius屬性,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-08-18
HTML+css盒子模型案例(圓,半圓等)“border-radius” 簡單易上手
這篇文章主要介紹了HTML+css盒子模型案例(圓,半圓等)“border-radius” 簡單易上手,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,2021-05-10