<!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. springboot rabbitmq direct exchange和topic exchange 写法上关于路由键的区别

    这是direct exchange写法中消息发送写法,可见下图红色框中路由键是queue队列中定义的路由键 这是topic exchange写法中消息发送写法,可见下图红色框中路由键是exchange ...

  2. inode，软硬链接

    如何查看inode ll -di /boot / /app查看文件和文件夹的inode号 df -i查看挂载点文件夹的inode号 做inode增长实验 创建60万个文件的方法1(效率不高):for ...

  3. .net中[Serializable]序列化的应用

    原文链接:https://blog.csdn.net/wanlong360599336/article/details/9222459 浅析.NET中的Serialization 摘要 本文简要介绍了 ...

  4. qt5--对话框

    颜色对话框——QColorDialog: 需要   #include <QColorDialog> QColor color=QColorDialog::getColor(QColor(, ...

  5. 对于Arraylist 的一些疑问

    是否保证线程安全? ArrayList 和 LinkedList 都是不同步的,也就是不保证线程安全. 底层数据结构区别? Arraylist 底层使用的是Object数组:LinkedList 底层 ...

  6. 【MongoDB系列】简介、安装、基本操作命令

    文章内容概述: 1.MongoDB介绍 2.MongoDB安装(windows及Linux) 3.MongoDB基本操作命令 MongoDB介绍: MongoDB 是一个基于分布式文件存储的数据库.由 ...

  7. 吴恩达+neural-networks-deep-learning+第二周作业

    Logistic Regression with a Neural Network mindset v4 简单用logistic实现了猫的识别,logistic可以被看做一个简单的神经网络结构,下面是 ...

  8. ubuntu1804　安装Ｎvidia驱动-nvidia-docker

    操作 看显卡 lspci | grep N 01:00.0 3D controller: NVIDIA Corporation GM107M [GeForce GTX 960M] (rev a2) 0 ...

  9. jquery focus()方法 语法

    jquery focus()方法 语法 作用:当元素获得焦点时,发生 focus 事件.大理石平台价格 触发focus事件语法:$(selector).focus() 将函数绑定到focus事件语法: ...

  10. HGOI 20190711 题解

    Problem A 矩阵第K小数 给定一个$n \times m$的矩阵,位置$A_{i,j}  = i\times j$, 给出$Q$个询问,每一次查询矩阵中第$Q_i$小的数是多少. 对于100% ...