<!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>

效果：

实现原理：在有重叠部分，每个环对应位置有两个环，一个有色环，一个透明环，根据重叠部分应有的颜色设置透明环边框的颜色。

例如:

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值的属性上。

html+css实现奥运五环(环环相扣)的更多相关文章

  1. 用html和css制作奥运五环

    <html><head><meta charset="utf-8"> <style>.circle1,.circle2,.circl ...

  2. Div+Css中transparent制作奥运五环

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. 【MATLAB】用MATLAB绘制奥运五环

    [MATLAB]用MATLAB绘制奥运五环 今天用MATLAB绘制了一个奥运五环,好吧,实际上是帮人做作业,嘿嘿. 贴代码: clear; clc; N = 1000; angle = linspac ...

  5. Python绘制奥运五环

    绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(dista ...

  6. 第一讲：使用html5——canvas绘制奥运五环

    <html> <head> <title>初识canvas</title> </head> <body> <canvas ...

  7. python3 turtle画正方形、矩形、正方体、五角星、奥运五环

    python3 环境 turtle模块 分别画出 正方形.矩形.正方体.五角星.奥运五环 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:H ...

  8. 【scratch3.0教程】 2.3 奥运五环

    (1)编程前的准备 在设计一个作品之前,必须先策划一个脚本,然后再根据脚本,收集或制作素材(图案,声音等),接着就可以启动Scratch,汇入角色.舞台,利用搭程序积木的方式编辑程序,制作出符合脚本的 ...

  9. python使用turtle库绘制奥运五环

    效果图: #奥运五环 import turtle turtle.setup(1.0,1.0) #设置窗口大小 turtle.title("奥运五环") #蓝圆 turtle.pen ...

随机推荐

  1. python插入mysql数据(2)

    python插入mysql数据(2) """插入操作""" import pymysql import datetime from pymy ...

  2. SQL server 大量数据导入和系统运行慢的问题

    1.日常排查语句 --当前正在执行的语句 SELECT der.[session_id],der.[blocking_session_id], sp.lastwaittype,sp.hostname, ...

  3. C# 扩展方法——mysql-dapper(MySqlMapperExtensions)

    其他扩展方法详见:https://www.cnblogs.com/zhuanjiao/p/12060937.html 反射比较耗费性能,反射得到属性进行缓存 根据反射得到的属性,进行动态拼接sql语句 ...

  4. 从收发消息能力来理解TCP建立连接时的三次握手

    TCP是一个全双工协议,意味着在Client和Server都可以接收和发送数据. 所以,从另一个角度理解建立连接的目的就是要确保双方都要知道对端的收发消息的能力是正常的

  5. Scratch的入门笔记

    最近发现人工智能和编程在小学开始普及,由于好奇,所以开始去了解儿童编程方面的知识,希望增加一些儿童编程教育相关的知识面,跟上发展潮流. Scratch是一款由麻省理工学院的“终身幼儿园团队”(Life ...

  6. 4.JSP内置对象

    JSP内置对象,JSP提供了由容器实现和管理的内置对象,也可以称之为隐含对象,这些内置对象不需要通过 JSP页面编写来实例化,在所有的JSP页面中都可以直接使用,它起到了简化页面的作用. 在JSP中一 ...

  7. Kaplan–Meier estimator & Greenwood formula

    The Kaplan–Meier estimator (also known as the product limit estimator) estimates the survival functi ...

  8. 计蒜客T2202 数三角形（提高组2017模拟赛（三）day2T3） LZOJ3878攻略

    今天模拟赛考了一道计蒜客NOIP2017模拟赛(三)day2T3的数三角形,原题链接 https://nanti.jisuanke.com/t/T2202 ,LZOJ3878攻略.场上想了很久都没转化 ...

  9. jQuery_attr()操作

    下面来介绍jQuery的属性attr()操作: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  10. VSCode安装go语言开发环境，go插件问题解决

    在安装go插件时,会自动更新很多依赖库文件,都是从Github更新下来,但是因为Github的文件中,多有应用go官网中的文件,导致,因为网络缘故,不能直接下载,导致安装失败,如下:   Instal ...