<!DOCTYPE html><html><head><title>奥运五环</title><style type="text/css">*{margin: 0;padding: 0;}.wrapper{width: 780px;height: 370px;border:1px solid black;position: absolute;left: 50%;top: 50%;margin-left: -390px;margin-top: -185px;}.circle{width: 200px;height: 200px;border-radius: 50%;position: absolute;}/*蓝黑红黄绿*/.blue{border:20px solid blue;}.blue2{border:20px solid transparent;border-right-color: blue;z-index: 2;}.black{border:20px solid black;left: 270px;}.black2{border:20px solid transparent;border-bottom-color: black;border-right-color: black;left: 270px;z-index: 2;}.red{border:20px solid red;left: 540px;}.red2{border:20px solid transparent;border-left-color: red;left: 540px;z-index: 2;}.yellow{border:20px solid yellow;left: 140px;top:130px;}.green{border:20px solid green;left: 410px;top:130px;}.green2{border:20px solid transparent;border-left-color: green;left: 410px;top:130px;z-index: 2;}</style></head><body><div class="wrapper"><div class = "circle blue"></div><div class = "circle blue2"></div><div class = "circle black"></div><div class = "circle black2"></div><div class = "circle red"></div><div class = "circle red2"></div><div class = "circle yellow"></div><div class = "circle green"></div><div class = "circle green2"></div></div></body></html>
View Code
效果：
实现原理：在有重叠部分，每个环对应位置有两个环，一个有色环，一个透明环，根据重叠部分应有的颜色设置透明环边框的颜色。
例如:
transparent属性：
用来指定全透明色彩
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。在CSS3中，transparent被延伸到任何一个有color值的属性上。
