成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

看到一種css實(shí)現(xiàn)圓角的方法

int64 / 2639人閱讀

摘要：實(shí)現(xiàn)圓角，最常用的是使用背景圖和屬性。優(yōu)點(diǎn)可拉伸，簡(jiǎn)單方便，實(shí)現(xiàn)缺點(diǎn)只兼容現(xiàn)代瀏覽器看到的方法這個(gè)方法就略奇葩，但確實(shí)出現(xiàn)在了我們的產(chǎn)品中。具體來(lái)說(shuō)使用幾個(gè)標(biāo)簽，用控制寬度，從上到下一次變長(zhǎng)，造成一種圓角的感覺(jué)。

實(shí)現(xiàn)圓角，最常用的是使用背景圖和border-radius屬性。

圓角背景圖 
background: url(./bg.png);

優(yōu)點(diǎn)：兼容各瀏覽器

缺點(diǎn)：適應(yīng)性不好，無(wú)法拉伸；需要請(qǐng)求圖片資源。

border-radius 
border-radius: 5px;

優(yōu)點(diǎn)：可拉伸，簡(jiǎn)單方便，CSS實(shí)現(xiàn)

缺點(diǎn)：只兼容現(xiàn)代瀏覽器

看到的方法

這個(gè)方法就略奇葩，但確實(shí)出現(xiàn)在了我們的產(chǎn)品中。大致思路是使用不同寬度的1px直線達(dá)到漸變的效果。
具體來(lái)說(shuō)：使用幾個(gè)標(biāo)簽，用margin控制寬度，從上到下一次變長(zhǎng)，造成一種圓角的感覺(jué)。

所以這個(gè)圓角其實(shí)只是模擬的圓角，并不是很圓，但應(yīng)該也瞞混的過(guò)去...

個(gè)人感覺(jué)

優(yōu)點(diǎn)：兼容各瀏覽器，可拉伸，CSS實(shí)現(xiàn)

缺點(diǎn)：代碼太復(fù)雜；圓角其實(shí)并不是特別圓...

HTML代碼：

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;
}
總結(jié)

運(yùn)用一些想象力，CSS可以實(shí)現(xiàn)很多好玩的東西。不過(guò)對(duì)于圓角，個(gè)人還是喜歡border-radius的實(shí)現(xiàn)，因?yàn)楹?jiǎn)單，代碼簡(jiǎn)潔，低版本瀏覽器退化到直角，也是非常好看的，有時(shí)候甚至覺(jué)得直角比圓角還好看。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115268.html

相關(guān)文章

  • 看到一種css實(shí)現(xiàn)圓角的方法

    摘要：實(shí)現(xiàn)圓角，最常用的是使用背景圖和屬性。優(yōu)點(diǎn)可拉伸，簡(jiǎn)單方便，實(shí)現(xiàn)缺點(diǎn)只兼容現(xiàn)代瀏覽器看到的方法這個(gè)方法就略奇葩，但確實(shí)出現(xiàn)在了我們的產(chǎn)品中。具體來(lái)說(shuō)使用幾個(gè)標(biāo)簽，用控制寬度，從上到下一次變長(zhǎng)，造成一種圓角的感覺(jué)。 實(shí)現(xiàn)圓角，最常用的是使用背景圖和border-radius屬性。 showImg(https://segmentfault.com/img/bVvPF9); 圓角背景圖 ba...

    wow_worktile 評(píng)論0 收藏0

  • 用純css來(lái)實(shí)現(xiàn)一個(gè)優(yōu)惠券

    摘要：關(guān)于徑向漸變的具體使用可以參考張?chǎng)涡竦奈恼聫较驖u變語(yǔ)法及輔助理解案例則那么怎樣實(shí)現(xiàn)我們要的效果呢我們先看看徑向漸變的語(yǔ)法徑向漸變由它的中心定義。 查看原文可以有更好的排版效果哦 前言 我們?cè)谄綍r(shí)的網(wǎng)頁(yè)中，經(jīng)常會(huì)見(jiàn)到這樣的優(yōu)惠券或者其他的券（特征就是會(huì)有反方向的圓角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

    awkj 評(píng)論0 收藏0

  • [譯]148個(gè)資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對(duì)作出的官方說(shuō)明。速查表兩份表來(lái)自一份關(guān)于基礎(chǔ)特性，一份關(guān)于布局。核心第一篇一份來(lái)自的基礎(chǔ)參考指南簡(jiǎn)寫速查表簡(jiǎn)寫形式參考書(shū)使用層疊樣式表基礎(chǔ)指南，包含使用的好處介紹個(gè)方法快速寫成高質(zhì)量的寫出高效的一些提示。 迄今為止，我已經(jīng)收集了100多個(gè)精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設(shè)計(jì)脫穎而出。 CSS3 資源 20個(gè)學(xué)習(xí)CSS3的有用資源 C...

    impig33 評(píng)論0 收藏0

  • “蟬原則”與CSS3隨機(jī)多背景隨機(jī)圓角等效果

    摘要：那蟬原則對(duì)我們網(wǎng)頁(yè)設(shè)計(jì)有什么啟示呢那就是可以以最小成本實(shí)現(xiàn)更自然的隨機(jī)效果。本文就演示兩個(gè)借助蟬原則和特性實(shí)現(xiàn)隨機(jī)效果的例子。一、什么是蟬原則？ 蟬原則，英文稱作cicada principle，是一種讓事物的重復(fù)出現(xiàn)符合自然隨機(jī)性的規(guī)則，為什么這么說(shuō)呢？ 蟬原則源自于北美，中國(guó)似乎并未有這樣的說(shuō)法，這背后是有有故事的： 北美和東亞蟬的種群是不一樣的，在東亞蟬的幼蟲(chóng)生活在土中3年5年或7...

    crossoverJie 評(píng)論0 收藏0

  • CSS3 巧妙實(shí)現(xiàn)聊天氣泡

    摘要：想必大家都知道，這里不贅述，聊一聊其他實(shí)現(xiàn)方法。這里的三角形部分可以使用正方形代替，實(shí)現(xiàn)同樣效果，方法就是旋轉(zhuǎn)小正方形使其一部分露在外面。 showImg(https://segmentfault.com/img/bVEcKn?w=4136&h=1956); 前一陣子敢玩的 Mobile 頁(yè)改版完成了，就之前的頁(yè)面風(fēng)格更加扁平化，從暗色系為主背景轉(zhuǎn)到亮色背景，去掉更多的陰影，給用戶簡(jiǎn)約...

    bang590 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<