国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

wow_worktile / 3457人閱讀

摘要：實現圓角，最常用的是使用背景圖和屬性。優點可拉伸，簡單方便，實現缺點只兼容現代瀏覽器看到的方法這個方法就略奇葩，但確實出現在了我們的產品中。具體來說使用幾個標簽，用控制寬度，從上到下一次變長，造成一種圓角的感覺。

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

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

優點：兼容各瀏覽器

缺點：適應性不好，無法拉伸；需要請求圖片資源。

border-radius 
border-radius: 5px;

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

缺點：只兼容現代瀏覽器

看到的方法

這個方法就略奇葩，但確實出現在了我們的產品中。大致思路是使用不同寬度的1px直線達到漸變的效果。
具體來說：使用幾個標簽，用margin控制寬度，從上到下一次變長，造成一種圓角的感覺。

所以這個圓角其實只是模擬的圓角，并不是很圓，但應該也瞞混的過去...

個人感覺

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

缺點：代碼太復雜；圓角其實并不是特別圓...

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;
}
總結

運用一些想象力，CSS可以實現很多好玩的東西。不過對于圓角，個人還是喜歡border-radius的實現，因為簡單，代碼簡潔，低版本瀏覽器退化到直角，也是非常好看的，有時候甚至覺得直角比圓角還好看。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54330.html

相關文章

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

    摘要：實現圓角，最常用的是使用背景圖和屬性。優點可拉伸，簡單方便，實現缺點只兼容現代瀏覽器看到的方法這個方法就略奇葩，但確實出現在了我們的產品中。具體來說使用幾個標簽，用控制寬度，從上到下一次變長，造成一種圓角的感覺。 實現圓角，最常用的是使用背景圖和border-radius屬性。 showImg(https://segmentfault.com/img/bVvPF9); 圓角背景圖 ba...

    int64 評論0 收藏0

  • 用純css來實現一個優惠券

    摘要：關于徑向漸變的具體使用可以參考張鑫旭的文章徑向漸變語法及輔助理解案例則那么怎樣實現我們要的效果呢我們先看看徑向漸變的語法徑向漸變由它的中心定義。 查看原文可以有更好的排版效果哦 前言 我們在平時的網頁中，經常會見到這樣的優惠券或者其他的券（特征就是會有反方向的圓角）。 showImg(https://segmentfault.com/img/remote/146000001570560...

    awkj 評論0 收藏0

  • [譯]148個資源讓你成為CSS專家

    摘要：層疊樣式表二修訂版這是對作出的官方說明。速查表兩份表來自一份關于基礎特性，一份關于布局。核心第一篇一份來自的基礎參考指南簡寫速查表簡寫形式參考書使用層疊樣式表基礎指南，包含使用的好處介紹個方法快速寫成高質量的寫出高效的一些提示。 迄今為止，我已經收集了100多個精通CSS的資源，它們能讓你更好地掌握CSS技巧，使你的布局設計脫穎而出。 CSS3 資源 20個學習CSS3的有用資源 C...

    impig33 評論0 收藏0

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

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

    crossoverJie 評論0 收藏0

  • CSS3 巧妙實現聊天氣泡

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

    bang590 評論0 收藏0

發表評論

0條評論

wow_worktile

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<