您当前的位置: 站长圈 > 技术文章 > 网页前端 > div+css圆角框之一——纯css无图片(css2)

div+css圆角框之一——纯css无图片(css2)

来源:站长圈 作者:adminzzq 点击: 0
 网站页面上常常有一些漂亮的圆角框,这样使得整个网站看起来柔化了很多,不再那么棱角分明。圆角框的制作方法有很多种,今天我们就说一下纯css无图片的圆角框。
    写代码之前我们先把思路分析一下。打个比方,我们知道,电脑的屏幕就是一个个点组成的面,这个圆角框就类似于这样的结构。
    先从上到下排列4个1像素高的块,宽度由包含它们的div决定。
   

 
      
      
      
   

    css代码为:
   
    第一个块bor1设置背景颜色为黑色,这样就得到了一条1px高(的线条(height:1px;),再设置它的左右边距是4像素margin:0 4px;,这样“线条”的左右两边离外面的div都有4px的空白距离;
    第二个块bor2同样是1px高,设置它的左右边框为1px、黑色、实线(border-left:1px solid #000; border-right:1px solid #000; ),这样就形成了两边看上去各有一个点,然后设置它的左右边距margin:0 3px;,注意,这里要比第一个块的边距少一点,同样的道理,第三个块bor3和第四个块bor4的左右边距都要慢慢的缩小,这样才能看上去有弧度,像一个圆角。
    让我们把效果放大了看一下吧:

   \

    然后在四个块下面放一个内容区content,高度视你的需要定,设置它的左右边框为1px、黑色、实线(border-left:1px solid #000; border-right:1px solid #000; ),这样与上半部分的圆角衔接起来,作为整个圆角框的左右边框,代码为:
   

          我是无图片纯css的圆角框哦
    

css代码为:
    .content{ height:50px; border-left:1px solid #000; border-right:1px solid #000; }
看看连接起来的效果图:
\

    最后,下半部分的圆角框只要把上半部分的圆角框html代码颠倒一下,让它的圆角慢慢的向里缩就ok了。如:
     
      
      
      
    看看放大后的整体效果,是不是用css代码“画”出了一个圆角框呢:
\

    浏览器里的最终效果如图:
\