css3圆角实现奥运五环标志

在  <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带值）

css3圆角实现奥运五环标志相关推荐

html css 奥运五环,用css3实现一个奥运五环
css3实现奥运五环的方法:首先给5个div设置border-radius样式,制作五个圆环:然后使用position属性设置五个圆环的位置:最后使用z-index属性调整各环的层级关系即可. 本教程 ...
纯HTML+CSS 画奥运五环标志，我就是闲的
<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8&q ...
matlab画奥运五环,MATLAB在同一坐标轴下，画出奥运五环标志，要求比例合适，每环用不同颜色表示怎么...
这个题目有点意思,好想法,但M软件画这种图不是强项呀画图是可以,但估计肯定达不到很好的效果的,我画了一个,你看看,有问题再联系.clear all;clc;x0=3;y0=3;x=[x0-1,x0+1 ...
弘扬奥运精神，我们49行画个奥运五环
虽然这届奥运遇到重重阻碍,疫情影响而延后,延后了要举办民众反对,再然后彩排后还爆出xq案件,更有小道爆出黑幕.这些种种我们就忽略掉吧- 截止本文发表,我们看看战况: 弘扬奥运精神,今天我们用49行写歌 ...
Python Turtle绘图[难度2星]：奥运五环（用最简单的方法实现五环套接）
绘制五环的代码网上很多,但是大部分代码没能实现五环套接:少数实现了的,代码也较难.不适合初中生练习. 而且五环的颜色是有规定的,并不是大家常用的blue,black,red,yellow,green. ...
SVG-矢量图-奥运五环及奥迪标志
SVG继续基础玩法. 知识点一:style属性可以快速填写部分对应的值,但不是所有值都可以这样写. 知识点二:fill属性用来表示填充色,transparent表示透明,这可以实现空心圆. <s ...
html+css实现奥运五环(环环相扣)
<!DOCTYPE html> <html> <head><title>奥运五环</title> <style type=" ...
css圆角框四周阴影,css3圆角边框，边框阴影
border-radius向元素添加圆角边框,css3中的.IE9+ chrome safari5+ firefox4+ 现在都支持.可以向input div等设置边框.与border相似,可以四个角 ...
python使用turtle绘制奥运五环
python使用turtle绘制奥运五环奥林匹克标志中五个环的大小,颜色,间距有固定的比例,规定圆的半径为45,五个圆的起始坐标为(-110,-25),(0,-25),(110,-25),(-55, ...

css3圆角实现奥运五环标志

css3圆角实现奥运五环标志相关推荐

最新文章

热门文章