思洋互动网站建设学前班

我们来看一个在大多数项目中都会遇到的设计问题--给界面元素创建圆角效果，可能是设计选项卡式界面，也可能是给诸如头部这样的块状元素应用圆角。在CSS 2.1中可以使用滑动门技术（http://www.alistapart.com/articles/slidingdoors/）来实现，即将一张背景图片放在另一张后面。对应的HTML代码比较简单：

1. <a href="#"><span>Box Title</span></a> 

广州网站设计

1. a {  
   •   display: block;  
     •   height: 40px;  
       •   float: left;  
         •   font-size: 1.2em;  
           •   padding-right: 0.8em;  
             •   background: url(images/headerRight.png) no-repeat scroll top right;  
               • }  
                 • a span {  
                   •   background: url(images/headerLeft.png) no-repeat;  
                     •   display: block;  
                       •   line-height: 40px;  
                         •   padding-left: 0.8em;  
                           • }  

广州网站建设

1. <a href="#">Box Title</a> 

1. a {  
   •   float: left;  
     •   height: 40px;  
       •   line-height: 40px;  
         •   padding-left: 0.8em;  
           •   padding-right: 0.8em;   
             •   border-top-left-radius: 8px;  
               •   border-top-right-radius: 8px;  
                 •   background-image: url(images/headerTiny.png);  
                   •   background-repeat: repeat-x;  
                     • }