畫圓

.round { border-radius: 5px; /* 所有角都使用半徑為5px的圓角,此屬性為CSS3標(biāo)準(zhǔn)屬性 / -moz-border-radius: 5px; / Mozilla瀏覽器的私有屬性 / -webkit-border-radius: 5px; / Webkit瀏覽器的私有屬性 / border-radius: 5px 4px 3px 2px; / 四個半徑值分別是左上角、右上角简识、右下角和左下角 */}

關(guān)于在IE里怎么實(shí)現(xiàn)圓角舟误,可以看《Excellent Article Which Included Ways to Achieve Rounded Corners in IE》這篇文章野哭。

1.用border-radius畫圓
實(shí)心圓


CSS3圓

如圖彤钟,是用border-radius屬性畫出來的一個完美的實(shí)心圓斑胜。畫實(shí)心圓的方法是高度和寬度相等鞠抑,并且把border的寬度設(shè)為高度和寬度的一半饭聚。代碼如下。
123456

circle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 100px;}

空心圓


CSS3空心圓

通過border-radius屬性畫空心圓和畫實(shí)心圓的方法差不多搁拙,只是border的寬度只能小于高度和寬度的一半秒梳。代碼如下。
1234567

circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 solid; -webkit-border-radius: 100px;}

虛線圓


CSS3虛線圓

1234567

circle { width: 200px; height: 200px; background-color: #efefef; /* Can be set to transparent */ border: 3px #a72525 dashed; -webkit-border-radius: 100px 100px 100px 100px;}

2.半圓和四分之一圓
樹半圓


CSS3半圓

以本例來講箕速,半圓的畫法是把寬度設(shè)為高度的一半酪碘,并且也只設(shè)置左上角和左下角的半徑。代碼如下盐茎。

quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0;}

橫半圓

Paste_Image.png

quartercircle {width: 200px;height: 100px;background-color: #a72525;-webkit-border-radius: 0 0 100px 100px;}

四分之一圓


CSS3四分之一圓

四分之一圓的實(shí)現(xiàn)方法是把高度和寬度設(shè)置為相等兴垦,只設(shè)置一個圓角,其半徑等于高度或?qū)挾茸帜1纠a如下探越。
123456

quartercircle { width: 200px; height: 200px; background-color: #a72525; -webkit-border-radius: 200px 0 0 0;}

本文轉(zhuǎn)載自http://www.xincss.com/?p=221

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市窑业,隨后出現(xiàn)的幾起案子钦幔,更是在濱河造成了極大的恐慌,老刑警劉巖常柄,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件鲤氢,死亡現(xiàn)場離奇詭異,居然都是意外死亡西潘,警方通過查閱死者的電腦和手機(jī)卷玉,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秸架,“玉大人揍庄,你說我怎么就攤上這事《ǎ” “怎么了蚂子?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵沃测,是天一觀的道長。 經(jīng)常有香客問我食茎,道長蒂破,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任别渔,我火速辦了婚禮附迷,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘哎媚。我一直安慰自己喇伯,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布拨与。 她就那樣靜靜地躺著稻据,像睡著了一般。 火紅的嫁衣襯著肌膚如雪买喧。 梳的紋絲不亂的頭發(fā)上捻悯,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機(jī)與錄音淤毛,去河邊找鬼今缚。 笑死,一個胖子當(dāng)著我的面吹牛低淡,可吹牛的內(nèi)容都是我干的姓言。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼查牌,長吁一口氣:“原來是場噩夢啊……” “哼事期!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起纸颜,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤兽泣,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后胁孙,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體唠倦,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年涮较,在試婚紗的時候發(fā)現(xiàn)自己被綠了稠鼻。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡狂票,死狀恐怖候齿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤慌盯,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布周霉,位于F島的核電站,受9級特大地震影響亚皂,放射性物質(zhì)發(fā)生泄漏俱箱。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一灭必、第九天 我趴在偏房一處隱蔽的房頂上張望狞谱。 院中可真熱鬧,春花似錦禁漓、人聲如沸跟衅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽与斤。三九已至,卻和暖如春荚恶,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背磷支。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工谒撼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人雾狈。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓廓潜,卻偏偏與公主長得像,于是被迫代替她去往敵國和親善榛。 傳聞我的和親對象是個殘疾皇子辩蛋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,786評論 2 345

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

  • 各種純css圖標(biāo) CSS3可以實(shí)現(xiàn)很多漂亮的圖形,我收集了32種圖形移盆,在下面列出悼院。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,474評論 0 8
  • 1咒循、垂直對齊 如果你用CSS据途,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在叙甸,利用CSS3的Transform颖医,...
    kiddings閱讀 3,148評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font裆蒸,text-align熔萧,li...
    love2013閱讀 2,303評論 0 11
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align佛致,li...
    wzhiq896閱讀 1,730評論 0 2
  • 清夢飛揚(yáng) 志不同和道不容遂赠, 何來諂媚論英雄。 摯友緣得同游意晌杰, 淺言寡語綴蒼穹跷睦。 清夢飛揚(yáng)在吉林與你共享...
    清夢飛揚(yáng)閱讀 316評論 5 5