CSS圆角

HTML的DOM结构如下，用一个div层做容器，另外再用四个层，分别用来容纳四个圆角。

<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换一个院直径20px,不会用PS只能用这么傻瓜式的工具，然后导入Expression Design切分成四个半圆，导出效果如下

         

对容器container定义如下样式

.container{

    position:relative;

    padding:10px;

    width:360px;

    margin:20px;

}

对其他类定义如下的样式

.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');

}

最后写入内容试试

<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>