css3圆角实现奥运五环标志

最新推荐文章于 2021-11-15 16:45:29 发布

小鱼爱曲奇

最新推荐文章于 2021-11-15 16:45:29 发布

阅读量993

点赞数

分类专栏： CSS 文章标签： css3 border-radius borderradius 圆角效果奥运五环

本文链接：https://blog.csdn.net/yuxuan89814/article/details/38639329

版权

CSS 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在  <a target=_blank target="_blank" href="http://www.phpernote.com/web_tools/private/example/00006.htm" style="color: rgb(255, 0, 0); font-family: 'Courier New'; font-size: 14px; line-height: 25px;">css3圆角实现奥运五环标志</a> 这种五环画法的基础上进行了简化

<pre name="code" class="css">效果：

<img src="https://img-blog.csdn.net/20140817152458078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXV4dWFuODk4MTQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

代码：

<!DOCTYPE html> 
<html> 
 <head> 
     <meta charset="UTF-8" /> 
     <title>The Olympic Flag</title>  
     <style type="text/css" media="screen"> 
     body {
         margin:20px;
         background-color:#efefef;
     }
     ul.flag {
         list-style-type:none;
         margin: 20px auto;
         ;
     } 
   
     .flag li{
position:absolute;
         display:block;
         -webkit-border-radius: 6em;
         -moz-border-radius: 6em;
         border-radius:6em;
         border: solid 1em black;
         width: 10em;
         height: 10em;
         left: 0;
         top: 0;
         font-size: 1em;
     }  
   
   
     
     .flag .blue   { z-index: 10; left: 0; top: 0; }
     .flag .yellow { z-index: 20; left: 6.8em;  top: 5.7em; }
     .flag .black  { z-index: 21; left: 13.6em; top: 0; }
     .flag .green  { z-index: 20; left: 20.4em; top: 5.7em; }
     .flag .red    { z-index: 10; left: 27.2em; top: 0px; }   
     
     .flag .blue   { border-color: blue; }   
     .flag .yellow { border-color: yellow; } 
     .flag .black  { border-color: black; }
     .flag .green  { border-color: green; } 
     .flag .red  { border-color: red; }
     /* 蓝色压住黄色 */  
     .flag .blue.alt { z-index: 24; }
     .flag .blue.alt 
     {
         border-top-color: transparent;
         border-left-color: transparent;
         border-bottom-color: transparent;
     }
     /* 黄色压住黑色 */
     .flag .yellow.alt { z-index: 23; }
     .flag .yellow.alt
      {
         border-right-color: transparent;
         border-left-color: transparent;
         border-bottom-color: transparent;
     }    
     /* 绿色压住黑色  */
     .flag .green.alt { z-index: 23; }
     .flag .green.alt
     {
         border-top-color: transparent;
         border-right-color: transparent;
         border-bottom-color: transparent;
     }
     /* 红色压住绿色  */
     .flag .red.alt { z-index: 23; }
     .flag .red.alt
    {
         border-top-color: transparent;
         border-right-color: transparent;
         border-left-color: transparent;
     }       
     </style>   
 </head> 
 <body> 
    <ul class="flag"> 
         <li class="blue"></li> 
         <li class="blue alt"></li> 
         <li class="yellow"></li> 
         <li class="yellow alt"></li> 
         <li class="black"></li> 
         <li class="green"></li> 
         <li class="green alt"></li> 
         <li class="red"></li> 
         <li class="red alt"></li> 
     </ul>   
 </body> 
</html>

原先的方法用了：after 和before伪元素，帮组画出圆圈。其实，不需要这两个伪元素，也可以达到效果，只要根据width值和border-width值，设置好border-radius的值即可。具体可看我的上篇日志： CSS3的border-radius属性画出圆圈效果（border-width带值）