<!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. mysql5.7.26 基于GTID的主从复制环境搭建

    简单工作原理: (1)从库执行 change master to 语句,会立即将主库信息记录到master.info中 (2)从库执行 start slave语句,会立即生成IO_T和SQL_T (3 ...

  2. 使用CreateMetaFile创建WMF文件，并转换为EMF文件

    #include <iostream> #include <stdio.h> #include <WINDOWS.H> #include <shellapi. ...

  3. windows笔记本命令行方式建立wifi热点

    建立热点: @echo off netsh wlan set hostednetwork mode=allow netsh wlan set hostednetwork ssid=热点名 key=密码 ...

  4. grunt-contrib-watch 实时监测文件状态

    grunt-contrib-watch:实时监测文件的增删改状态,状态改变时自动执行预定义任务使用watch时,被watch的文件可以分开写,这样可以提高watch的性能,不用每次把没修改的文件也执行 ...

  5. MYSQL 大文件导出导入

    1.导出sql文件 mysqldump  --column-statistics=0 -uusername -ppassword -hyour server ip --default-characte ...

  6. git的安装教程

    团队开发的时候常要用到git来对代码进行管理,平时开发的时候也需要使用git来做一些事情,如给vue项目进行代码编译等等. 那下面我们开始 一.安装和配置环境 首先下载git安装包(去官网下载,htt ...

  7. win服务器安装sftp服务端

    工作环境中常常会用要下载数据或者是让对端推送数据到本地服务器上,当传输的数据比较重要时,可以使用基于安全文件传输协议(sftp)来实现需求. 本人在工作环境中就遇到这样的情况,局方给我们推送数据,要求 ...

  8. 手动升级 Confluence 6 - 升级以后

    7. 重新安装服务(仅针对 Windows) 如果你的 Confluence 安装实例在 Windows 中是以服务来运行的话,你需要删除已经存在的 Windows 服务,然后重新安装 Windows ...

  9. Color a Tree

    题目链接:Click here Solution: 看起来不太能dp,则考虑树上贪心 题目要求一个点必须先染父亲才能染自己,就给了我们启示,贪心的合并点 我们定义一个点的权重为这个点的价值和/点数,然 ...

  10. python动态的添加方法

    1.动态的创建实例方法 1 class Person(object): 2 def __init__(self,name,age): 3 self.name = name 4 self.age =ag ...