介绍 & lt; ! DOCTYPE html>
& lt; html>
& lt; head>
,,,& lt; meta charset=癠TF-8"比;
,,,& lt; title> Title
,,,& lt; style>
,,,,,,,* {
,,,,,,,,,,,保证金:,0;
,,,,,,,,,,,填充:,0;
,,,,,,,}
,,,,,,,div {
,,,,,,,,,,,宽度:,200 px;
,,,,,,,,,,,身高:,200 px;
,,,,,,,,,,,边界:,10 px 固体;
,,,,,,,,,,,这个特性:,50%;
,,,,,,,,,,,:浮动,离开;
,,,,,,,,,,,位置:,绝对;
,,,,,,,}
,,,,,,,之后div: {
,,,,,,,,,,,宽度:,200 px;
,,,,,,,,,,,身高:,200 px;
,,,,,,,,,,,边界:,10 px 固体;
,,,,,,,,,,,这个特性:,50%;
,,,,,,,,,,,:浮动,离开;
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,内容:,““
,,,,,,,,,,,左:,-10 px;/*相对于父级定位,但不包括边界,所以利用负边距使他们重合*/,,,,,,,,,,,:-10 px;
,,,,,,,}
,,,,,,,.blue {
,,,,,,,,,,,,边框颜色:蓝色;
,,,,,,,,,,,:0;
,,,,,,,,,,,左:,0;
,,,,,,,}
,,,,,,,之后.blue: {
,,,,,,,,,,,,边框颜色:蓝色;
,,,,,,,,,,,z - index:, 1;
,,,,,,,,,,,border-bottom-color:,透明的,/*将下边框设为透明,使看到的为黄色环,以下同理*/,,,,,,,}
,,,,,,,{布莱克
,,,,,,,,,,,,边框颜色:黑色;
,,,,,,,,,,,:0;
,,,,,,,,,,,左:,230 px;
,,,,,,,}
,,,,,,,:布莱克:{后
,,,,,,,,,,,,边框颜色:黑色;
,,,,,,,,,,,z - index:, 1;
,,,,,,,,,,,border-left-color:,透明;
,,,,,,,}
,,,,,,,r {
,,,,,,,,,,,,边框颜色:红色;
,,,,,,,,,,,:0;
,,,,,,,,,,,左:,460 px;
,,,,,,,}
,,,,,,,{后r::
,,,,,,,,,,,,边框颜色:红色;
,,,,,,,,,,,z - index:, 1;
,,,,,,,,,,,border-left-color:,透明;
,,,,,,,}
,,,,,,,.yellow {
,,,,,,,,,,,,边框颜色:黄色;
,,,,,,,,,,,:110 px;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章将为大家详细讲解有关使用css3怎么实现一个奥运五环,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
1, z - index调各环的层级关系
2,透明设置透明度
<强>具体代码:
