純CSS實現圓角效果

2020-03-24 18:25:44

字體：大中小

來源：轉載

供稿：網友

一，線條兩端縮進，這個是純Css圓角的結構，當然，里面的div1、div2、div3、div5也可以用任何可以實現1像素線條的標簽：
/div 這種方法是分別用上下兩邊的四條高為1px的線實現的，其基本思想是，最上面的一條線兩端縮進5px，第二條縮進3px,第三條縮進2px以此類推，第四縮進1px，這樣就會形成圓角效果，繼續往下看，大家就會明白。比如我們要做一個寬度為380px的圓解div，給這些代碼開始加上樣式，為了大家更容易理解，我把每根線條都用不同的顏色。
.content{border-left:1px solid #FF00FF; border-right:1px solid #FF00FF; line-height:30px;}為了讓大家看得更清楚，這是我放大后的效果，我們先給最外面的mydiv聲明一個html' target='_blank'>class類（灰色邊框就是），設置它的寬度為380px，mydiv內的div1、div2、div3和div4就分別是紅、黃、綠、藍四條線，并且讓它們分別兩邊縮進5px、3px、2px、1px，這張截圖是mydiv的左邊，右邊和左邊同樣縮進。上面的代碼是為了讓大家好理解而寫的，在實際開發過程中就不用這么寫的，我們要盡量簡化代碼，并且為了方便修改邊框顏色和背景顏色，接下來我把這個代碼修改成：
.content{border-right:1px solid; border-left:1px solid; line-height:30px; overflow:hidden;}
.div2,.div3,.div5,.content{background:#CCFFCC;}我們把div2的邊框寬度設為2px和把div5的的高度設為2px的目底是為了圓角看起來更圓滑、自然，這種圓角方案現在應用很廣泛，不相的話，包括IE瀏覽器的左右上角都彩用這種解決方法。要修改這個div的寬度，只須要修改mydiv的width屬性就可以，背景和邊框顏色修改起來也很方便。這樣我們的純CSS實現圓角就做出來了，并且它能自適高度，寬度修改起來也很方便。我們再來放大后看看：從這個角度看，能很清晰的看出為什么要把div2的border-left和border-right設為2px、div5的height設為2px了吧。。。呵呵。二，邊框圓角，這種方法是我不經意間發現的，嚴格來說這種不屬于圓角，不過實現之后發現這種方法挺實用，這是利用了Css中的border特性，因為在CSS中border的寬度如果設為1px以是的話，把其它三條邊設為0px，這條邊的兩端就會出現斜角，來看一下吧。如圖，我們來做一個div，把它的邊框寬度設為5px，顏色設為灰色，并且把它的下邊框設為紅色，就能看出來了，根據這樣的特性，我們就可以做出一個準圓角div來，效果還不錯先來看看代碼吧。
.div1{height:0px; border:5px solid #FFFFFF; border-bottom-color:red; overflow:hidden; margin:0px auto;}
.div3{height:0px; border:5px solid #FFFFFF; border-top-colo:red; overflow:hidden; margin:0px auto;}效果：這個角度的大小是由上同兩個DIV的邊框寬度（即紅色部分）決定的，我們再來看看成品吧。Css做圓角的方法決大部分的思路就是以上這幾種方法，舉一反三，根據這幾種方法還能衍生出很多類似的方法。。。html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：使用Div+Css進行網頁布局的11個好處

下一篇：CSS TreeMenu 二級樹形菜單示例