您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > CSS圓角制作方法

CSS圓角制作方法

文章來(lái)源：365jz.com 點(diǎn)擊數(shù)：402 更新時(shí)間：2010-02-03 07:54 參與評(píng)論

HTML的DOM結(jié)構(gòu)如下，用一個(gè)div層做容器，另外再用四個(gè)層，分別用來(lái)容納四個(gè)圓角。

<div id="RdDemo" class="container">
  <div class="corner lt"></div>
  <div class="corner rt"></div>
  <div class="corner lb"></div>
  <div class="corner rb"></div>
</div>

然后我用Paint.NET換一個(gè)院直徑20px,不會(huì)用PS只能用這么傻瓜式的工具，然后導(dǎo)入Expression Design切分成四個(gè)半圓，導(dǎo)出效果如下

對(duì)容器container定義如下樣式

.container{
    position:relative;
    padding:10px;
    width:360px;
    margin:20px;
}

對(duì)其他類定義如下的樣式

.corner{
    position:absolute;
    height:10px;
    width:10px;
}
.lt{
    left:0px;
    top:0px;
    background-image:url('img/lt.gif');
}
.rt{
       right:0px;
       top:0px;
       background-image:url('img/rt.gif');
}
.lb{
    left:0px;
    bottom:0px;
        background-image:url('img/lb.gif');
}
.rb{
    right:0px;
    bottom:0px;
    background-image:url('img/rb.gif');
}

最后寫(xiě)入內(nèi)容試試

<div id="RdDemo" class="container">
  <strong>Hello round corner</strong>
  <p>OK,let's get started</p>
  <p>I always needed time on my own<br />
     I never thought I'd need you there when I cry<br />
     And the days feel like years when I'm alone<br />
     And the bed where you lie<br />
     is made up on your side<br />
  </p>
  <div class="corner lt"></div>
  <div class="corner rt"></div>
  <div class="corner lb"></div>
  <div class="corner rb"></div>
</div>