用CSS實(shí)現(xiàn)圓角框

CSS圓角進(jìn)化論
新手畫(huà)小像素—基本線條
超圓滑圓角框的半完美解決方案
純CSS圓角框

實(shí)例HTML部分:

    <div class="sharp color1">
        <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
        <div class="content">
              <h3>純css圓角框換膚方案一</h3>
              <div>這是最基本的圓角框,無(wú)圖片,四個(gè)圓角全部采用標(biāo)簽繪制修档,兼容所有瀏覽器,無(wú)HACK识藤。
              </div>
        </div>
        <b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b>
    </div>
</div>```

實(shí)例CSS部分:
```*{margin:0;padding:0;font-size:12px;}
.wrapper{width:80%;margin:0 auto;}
/*容器寬度值*/
.sharp{width:30%;margin:20px auto 0;float:left;margin-right:2%;}
.sharp .content div{padding:10px;text-indent:2em;}
.content{height:180px;}
h3{height:29px;line-height:29px;font-size:12px;text-indent:10px;}
a:link,a:visited{color:#999;font-weight:bold; text-decoration:none;}
a:hover{text-decoration:none; border-bottom:1px orange solid;color:orange;}

/*上圓角框通用設(shè)置樣式*/
.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{height:1px; font-size:1px; overflow:hidden; display:block;}
.b1,.b8{margin:0 5px;}
.b2,.b7{margin:0 3px;border-right:2px solid; border-left:2px solid;}
.b3,.b6{margin:0 2px;border-right:1px solid; border-left:1px solid;}
.b4,.b5{margin:0 1px;border-right:1px solid; border-left:1px solid; height:2px;}
.content {border-right:1px solid;border-left:1px solid;overflow:hidden;}
/*邊框色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{border-color:#96C2F1;}
.color1 .b1,.color1 .b8{background:#96C2F1;}
/*背景色*/
.color1 .b2,.color1 .b3,.color1 .b4,.color1 .b5,.color1 .b6,.color1 .b7,.color1 .content{background:#EFF7FF;}```
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末想幻,一起剝皮案震驚了整個(gè)濱河市恋谭,隨后出現(xiàn)的幾起案子场斑,更是在濱河造成了極大的恐慌漓踢,老刑警劉巖牵署,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件漏隐,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡奴迅,警方通過(guò)查閱死者的電腦和手機(jī)青责,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門挺据,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人脖隶,你說(shuō)我怎么就攤上這事扁耐。” “怎么了产阱?”我有些...
    開(kāi)封第一講書(shū)人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵婉称,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我构蹬,道長(zhǎng)王暗,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任庄敛,我火速辦了婚禮俗壹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘藻烤。我一直安慰自己绷雏,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布怖亭。 她就那樣靜靜地躺著涎显,像睡著了一般。 火紅的嫁衣襯著肌膚如雪兴猩。 梳的紋絲不亂的頭發(fā)上棺禾,一...
    開(kāi)封第一講書(shū)人閱讀 51,190評(píng)論 1 299
  • 那天,我揣著相機(jī)與錄音峭跳,去河邊找鬼膘婶。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蛀醉,可吹牛的內(nèi)容都是我干的悬襟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼拯刁,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼脊岳!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起垛玻,我...
    開(kāi)封第一講書(shū)人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤割捅,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后帚桩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體亿驾,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年账嚎,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了莫瞬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片儡蔓。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖疼邀,靈堂內(nèi)的尸體忽然破棺而出喂江,到底是詐尸還是另有隱情,我是刑警寧澤旁振,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布获询,位于F島的核電站,受9級(jí)特大地震影響拐袜,放射性物質(zhì)發(fā)生泄漏筐付。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一阻肿、第九天 我趴在偏房一處隱蔽的房頂上張望瓦戚。 院中可真熱鬧,春花似錦丛塌、人聲如沸较解。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)印衔。三九已至,卻和暖如春姥敛,著一層夾襖步出監(jiān)牢的瞬間奸焙,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工彤敛, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留与帆,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓墨榄,卻偏偏與公主長(zhǎng)得像玄糟,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子袄秩,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,077評(píng)論 25 707
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案阵翎? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評(píng)論 1 92
  • 我們讀過(guò)《千字文》,它的第一句就是“天地玄黃之剧,宇宙洪荒”郭卫。也就是說(shuō),在很久很久以前背稼,整個(gè)宇宙都是混混沌沌的贰军,分不清...
    梅香書(shū)宛閱讀 1,961評(píng)論 0 0
  • 片段 二: 選自《非暴力溝通》 【R 原文片段】 非暴力溝通第二個(gè)要素是感受。心理學(xué)家羅洛.梅認(rèn)為”成熟的人十分敏...
    林小燒賣閱讀 104評(píng)論 0 0
  • 四季常綠的樹(shù) 水里的太陽(yáng) 隨著腳步輕舞的葉子 起了球的灰色毛衣 揮之不去耳邊想念的轟鳴 欲言又止的眼睛 悄無(wú)聲息的...
    宋禾初閱讀 163評(píng)論 0 0