10 - CSS3 - 邊框圓角 - 太極八卦


本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!
博客地址 點(diǎn)擊跳轉(zhuǎn)

< ! ---------- HTML ----------- >

<div class="all">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>

< ! --------- Style --------------- >

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .all{
        width: 200px;
        height: 200px;
        border: 1px solid #000;
        margin: 100px auto;
        position: relative;
    }
    .all .top{
        width: 200px;
        height: 100px;
        background-color: red;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
    .all .bottom{
        width: 200px;
        height: 100px;
        background-color: deepskyblue;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
    }
    .all .left{
        width: 100px;
        height: 100px;
        border: 40px solid red;
        background-color: deepskyblue;
        box-sizing: border-box;
        border-radius: 50%;
        position: absolute;
        right: 0;
        bottom: 52px;
    }
    .all .right{
        width: 100px;
        height: 100px;
        border: 40px solid deepskyblue;
        background-color: red;
        box-sizing: border-box;
        border-radius: 50%;
        position: absolute;
        left: 0;
        bottom: 52px;
    }
</style>

< ! --------- 效果展示 ---------- >

**邊框圓角 - 太極八卦**
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子鳍怨,更是在濱河造成了極大的恐慌拳喻,老刑警劉巖档桃,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件行冰,死亡現(xiàn)場(chǎng)離奇詭異被碗,居然都是意外死亡撒犀,警方通過(guò)查閱死者的電腦和手機(jī)福压,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)或舞,“玉大人荆姆,你說(shuō)我怎么就攤上這事∮车剩” “怎么了胆筒?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我仆救,道長(zhǎng)抒和,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任彤蔽,我火速辦了婚禮摧莽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘顿痪。我一直安慰自己镊辕,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布蚁袭。 她就那樣靜靜地躺著丑蛤,像睡著了一般。 火紅的嫁衣襯著肌膚如雪撕阎。 梳的紋絲不亂的頭發(fā)上受裹,一...
    開(kāi)封第一講書(shū)人閱讀 49,802評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音虏束,去河邊找鬼棉饶。 笑死,一個(gè)胖子當(dāng)著我的面吹牛镇匀,可吹牛的內(nèi)容都是我干的照藻。 我是一名探鬼主播,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼汗侵,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼幸缕!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起晰韵,我...
    開(kāi)封第一講書(shū)人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤发乔,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后雪猪,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體栏尚,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年只恨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了译仗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡官觅,死狀恐怖纵菌,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情休涤,我是刑警寧澤咱圆,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響闷堡,放射性物質(zhì)發(fā)生泄漏隘膘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一杠览、第九天 我趴在偏房一處隱蔽的房頂上張望弯菊。 院中可真熱鬧,春花似錦踱阿、人聲如沸班挖。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)梯浪。三九已至,卻和暖如春佛点,著一層夾襖步出監(jiān)牢的瞬間醇滥,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工超营, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鸳玩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓演闭,卻偏偏與公主長(zhǎng)得像不跟,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子米碰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,768評(píng)論 25 707
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)窝革、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,063評(píng)論 4 62
  • 又是一年運(yùn)動(dòng)會(huì),又是一季新的初一米诉,又是一次女生成績(jī)是零菱蔬,又是一次男生剛剛突破零。運(yùn)動(dòng)會(huì)第一天史侣,秋風(fēng)瑟瑟樹(shù)葉落,心...
    娜木翰閱讀 1,145評(píng)論 2 4
  • 全身上下痛了一天魏身,走路跟企鵝一樣 真心覺(jué)得唱歌不如前兩年惊橱,狀態(tài)最好應(yīng)該是騎行車(chē)那段時(shí)間,真是邊爬坡邊唱歌箭昵,秒殺好多...
    是魔王大人閱讀 205評(píng)論 2 0
  • 回歸均值 慢性疼痛税朴、高爾夫成績(jī)、戀愛(ài)運(yùn)氣、主觀舒適感正林、職場(chǎng)成功等等這些情況泡一,有點(diǎn)類(lèi)似于股票價(jià)格的“隨機(jī)波動(dòng)”過(guò)程,...
    白菜幫子閱讀 256評(píng)論 0 0