CSS3画太极图

admin 发布于：2015-10-21 14:17:46

阅读：loading

看了下兄弟连的CSS3视频讲解，觉得圆角边框处值得学习学习，就按照视频中的讲解也做了一份儿示例，算是加深印象吧。示例中有使用纯css画出一个太极图的效果，瞬间感觉好像很高大上的样子，东西比较简单，作为总结分享的一个知识点，特别需要注意的是视频中的示例存在一个小小的兼容性问题，由于视频中的运行示例在chrome下显示正常，放到IE10下时的运行效果为：

也就是说在IE10下面出现的效果是多出边框与背景共存的一个宽度X的像素，后经过查找资料找到添加

background-clip:content-box;样式即可，具体可以在IE10下或chrome等浏览器下运行查看示例效果。

参考代码如下：

<!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8"/>
     <title>div的圆角学习</title>
     <style type="text/css">
         #div1 {
             width: 200px;
             height: 100px;
             border: 2px solid red;
             line-height: 100px;
             text-align: center;
             font-weight: bold;
         }
 
         #div2 {
             width: 200px;
             height: 100px;
             border: 2px solid red;
             line-height: 100px;
             text-align: center;
             font-weight: bold;
             border-radius: 20px;
         }
 
         #div3 {
             width: 200px;
             height: 100px;
             border: 2px solid red;
             line-height: 100px;
             text-align: center;
             font-weight: bold;
             border-radius: 100px/50px; /* 宽度的一半与高度的一半 */
         }
 
         #div4 {
             width: 200px;
             height: 100px;
             border: 2px solid red;
             line-height: 100px;
             text-align: center;
             font-weight: bold;
             border-bottom-right-radius: 100px 50px;
             border-top-right-radius: 100px 50px;
         }
 
         #div5 {
             width: 200px;
             height: 200px;
             border: 2px solid red;
             line-height: 200px;
             text-align: center;
             font-weight: bold;
             border-radius: 100px; /* 宽度的一半与高度的一半 */
         }
 
         #div6 {
             width: 200px;
             height: 100px;
             border: 2px solid red;
             border-bottom: 100px solid red;
             line-height: 200px;
             text-align: center;
             font-weight: bold;
             border-radius: 100px; /* 宽度的一半与高度的一半 */
         }
 
         #div7 {
             width: 200px;
             height: 100px;
             border: 2px solid red;
             border-bottom: 100px solid red;
             text-align: center;
             font-weight: bold;
             border-radius: 100px; /* 宽度的一半与高度的一半 */
             position: relative;
         }
 
         #div7::before {
             content: '';
             width: 20px;
             height: 20px;
             background: white;
             border: 40px solid red;
             /*display: inline-block;*/
             border-radius: 50px;
             position: absolute;
             left: 0px;
             top: 50px;
             background-clip: content-box;
         }
 
         #div7::after {
             content: '';
             width: 20px;
             height: 20px;
             background: red;
             border: 40px solid white;
             /*display: inline-block;*/
             border-radius: 50px;
             position: absolute;
             right: 0px;
             top: 50px;
             background-clip: content-box;
         }
     </style>
 </head>
 <body>
 <hr/>
 <div id="div1">
     普通矩形边框
 </div>
 <hr/>
 <div id="div2">
     普通圆角边框
 </div>
 <hr/>
 <div id="div3">
     普通椭圆边框
 </div>
 <hr/>
 <div id="div4">
     子弹头边框
 </div>
 <hr/>
 <div id="div5">
     圆形边框
 </div>
 <hr/>
 <div id="div6">
     半月形
 </div>
 <hr/>
 太极
 <div id="div7">
 </div>
 </body>
 </html>