css圆角是怎样实现的 _css凸边角-CSDN博客

一、用图片：

1，用圆角图片做背景。缺憾是不能自适应宽度和高度，而且需要修改颜色的话就需要修改图片的颜色。



2，用上下两张图片做背景，上面的圆角用一张图片，下面的也用一张图片，可以自适应高度。而宽度就取决于该张图片的宽度。



3，用四张图片。上下左右四个角分别用四张图片，可自适应高度和宽度。



以上讲的三种方法处理图片的时候在图片的外围小三角区域都填充网页的背景色，这样才能显示圆角。



二、纯CSS实现圆角：



 这个就比较不方便，，需要用到CSS中的边框来实现。

<head>

<style type="text/css">

.item{margin:0 10px;

      padding:0;  //这里只做常规设置，按照你的需要!}



  .item p{border:o;

          border-left:1px solid #000;

          border-right:1px solid #000;

          margin:0;

          }



  .item div{height:1px;

            overflow:hidden;

            border-left:1px solid #000;

            border-right:1px solid #000;}

                                        

  .item .row1{margin:0 5px;

              background:#000;}



  .item .row2{margin:0 3px;

              border:0 2px;}



  .item .row3{margin:0 2px;}



  .item .row4{margin:0 1px;

              height:2px;}



</style>

</head>



<body>

 <div class="item">

   <div class="row1"></div>

   <div class="row2"></div>

   <div class="row3"></div>

   <div class="row4"></div>

      <p>这是圆角内的内容</p>

   <div class="row4"></div>

   <div class="row3"></div>

   <div class="row2"></div>

   <div class="row1"></div>

</body>

</html>