<!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. 在vscode 中使用Git -- 已有项目添加到git

    本文使用与在已经存在本地项目的情况下将本地项目添加到git中管理,本地不存在项目则可以直接从Git上克隆下来后再创建项目目录更方便. 创建远程Git 仓库 如果Git 仓库已存在,可直接参考下一部,不 ...

  2. C++关于构造函数 和 析构函数 能否抛出异常的讨论

    构造函数和析构函数分别管理对象的建立和释放,负责对象的诞生和死亡的过程.当一个对象诞生时,构造函数负责创建并初始化对象的内部环境,包括分配内存.创建内部对象和打开相关的外部资源,等等.而当对象死亡时, ...

  3. uniapp引用iconfont图标

    不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再unia ...

  4. vue项目搭建步骤以及一些安装依赖包

    一． vue-cli初始化1. 全局安装 vue-clinpm install --global vue-cli2. 创建一个基于 webpack 模板的新项目vue init webpack my- ...

  5. 【leetcode】Trips and Users

    The Trips table holds all taxi trips. Each trip has a unique Id, while Client_Id and Driver_Id are b ...

  6. Redis常用数据类型底层数据结构分析

    Redis是一种键值(key-Value)数据库,相对于关系型数据库,它也被叫作非关系型数据库 Redis中,键的数据类型是字符串,但是为了非富数据存储方式,方便开发者使用,值的数据类型有很多 字符串 ...

  7. C# 2.0

    序言 泛型 为什么需要泛型? 分部类型 分部类和方法 partial 匿名方法 使用Delegate的时候很多时候没必要使用一个普通的方法,因为这个方法只有这个Delegate会用,并且只用一次,这时 ...

  8. Springboot 默认静态路径

    springboot 默认静态路径 代码如下所示 类ResourceProperties.class private static final String[] CLASSPATH_RESOURCE_ ...

  9. 彩色图像--色彩空间 CMY(K)空间

    学习DIP第63天 转载请标明本文出处:***http://blog.csdn.net/tonyshengtan ***,出于尊重文章作者的劳动,转载请标明出处!文章代码已托管,欢迎共同开发:http ...

  10. （Java多线程系列一）快速入门

    Java多线程快速入门 1.线程和进程的区别 进程是所有线程的集合,每一个线程是进程的一条执行路径. 2.多线程的应用场景 多线程主要体现在提高程序的效率,比如迅雷多线程下载,多线程分批发送短信等. ...