学步园

         背景的圆角设计可以使得网页看起来更加的柔和。首先准备四个圆角图片，如下所示：

        然后编写css样式：

        <style><br /> div.tl{<br /> width:220px;<br /> background:#3077eb url(images/yj1.png) top left no-repeat;<br /> }<br /> div.tr{<br /> background:url(images/yj2.png) top right no-repeat;<br /> }<br /> div.bl{<br /> background:url(images/yj3.png) bottom left no-repeat;<br /> }<br /> div.br{<br /> background:url(images/yj4.png) bottom right no-repeat;<br /> padding:10px;<br /> }<br /> h3{<br /> font-size:1em;<br /> color:white;<br /> margin-top:0;<br /> margin-bottom:8px;<br /> }<br /> p{<br /> font-size:0.9em;<br /> line-height:1.8em;<br /> text-indent:2em;<br /> color:white;<br /> padding:0;<br /> margin:1px 0;<br /> }<br /> </style>

        然后实现背景圆角设计：

        <div class="tl"><br /> <div class="tr"><br /> <div class="bl"><br /> <div class="br"><br /> <h3>• 圆角样式 •</h3><br /> <p>圆角样式经常用于网站设计当中，使用它可以提高页面的美观度，是页面边界元素看上去更加柔和。</p><br /> </div><br /> </div><br /> </div><br /> </div>

       最终实现的效果为：

         在这里，使用了4张图像应用到4个div元素的背景属性中，这样做可以获得最大的灵活性，区域的宽度和高度都能自由变化。对于宽度固定的区域，我们可以将某两个圆角图像进行合并，从而减少嵌套元素的使用，使页面结构更简洁。