看到一種css實現圓角的方法

實現圓角，最經常使用的是使用背景圖和border-radius屬性。

圓角背景圖

background: url(./bg.png);

• 優勢：兼容各瀏覽器

• 缺點：適應性很差，沒法拉伸；須要請求圖片資源。

border-radius

border-radius: 5px;

• 優勢：可拉伸，簡單方便，CSS實現

• 缺點：只兼容現代瀏覽器

看到的方法

這個方法就略奇葩，但確實出如今了咱們的產品中。大體思路是使用不一樣寬度的1px直線達到漸變的效果。
具體來講：使用幾個<b>標籤，用margin控制寬度，從上到下一次變長，形成一種圓角的感受。

因此這個圓角其實只是模擬的圓角，並非很圓，但應該也瞞混的過去...

我的感受

• 優勢：兼容各瀏覽器，可拉伸，CSS實現

• 缺點：代碼太複雜；圓角其實並非特別圓...

HTML代碼：

<div class="box line">
    <b class="line line1"></b>
    <b class="line line2"></b>
    <b class="line line3"></b>
    <b class="line line4"></b>
    <div class="box-content"></div>
    <b class="line line4"></b>
    <b class="line line3"></b>
    <b class="line line2"></b>
    <b class="line line1"></b>
</div>

CSS代碼：

.box{
    width:200px;
    height:62px;
    margin:20px;
}
.box .line{
    display:block;
    height:1px;
    overflow: hidden;
    background: #09f;
}
.box .line1{ margin:0 5px; }
.box .line2{ margin:0 3px; }
.box .line3{ margin:0 2px; }
.box .line4{ margin:0 1px; }
.box .box-content{
    width:200px;
    height:52px;
    background: #09f;
}

總結

運用一些想象力，CSS能夠實現不少好玩的東西。不過對於圓角，我的仍是喜歡border-radius的實現，由於簡單，代碼簡潔，低版本瀏覽器退化到直角，也是很是好看的，有時候甚至以爲直角比圓角還好看。