学习布局（21） CSS3实现圆角

实现如下图所示：

                                        

      .box {
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-top-color: red;
            border-radius: 50%;
        }

 <div class="box"></div>

传统方式实现圆角背景： 

       .con {
            width: 450px;
            height: 450px;
            padding: 20px;
            border: 5px solid #cccccc;
            border-radius: 50%;
        }

        .con img {
            display: block;
            height: 100%;
            width: 100%;
        }

 <!-- 图片本身就是圆角, 设置圆角边框 -->
    <div class="con">
        <img src="../images/demo_pic.png" alt="自然风景图"/>
    </div>

CSS3方法实现圆角背景 ：

        .con {
            width: 450px;
            height: 450px;
            padding: 20px;
            border: 5px solid #cccccc;
            border-radius: 50%;
        }

        .con img {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 50%;
        }

CSS3圆角边框的问题？ 

 实现圆角边框是不是必须设置border?

       不需要，border-radius 与 border 没有直接的关联，border-radius控制外边距的盒模型区域

如果为图像外部的标签设置圆角边框，是否能够限制图像的显示？ 

•   如果单独为外部标签设置border-radius,不能限制图像的显示 
•   如果外部元素没有内边距，只有内容区域，此时为外部元素设置圆角边框，设置overflow:hidden，以实现限制图像区域的要求，但如果父级元素有内边距，则必须为图像标签设置自身的圆角边框，才能达到显示的效果。      

使用box-shadow设置圆角边框：

         .pic {
             display: block;
             width: 450px;
             height: 450px;
             margin: 20px;
             box-shadow: 0 0 0 15px #f0f0f0, 0 0 0 20px #cccccc;
             border-radius: 50%;
         }

  <img class="pic" src="../images/demo_pic2.jpg" alt="测试图" />