如何用html和css画出三个同心圆

html-css019

如何用html和css画出三个同心圆,第1张

/这是我没完成的一个小玩意,不过能满足你的需求

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

*{margin: 0padding: 0}

ul,li{list-style: none}

.box{

width: 600px

height: 600px

position: relative

margin-top: 30%

}

.round1{

position: absolute

top: 0

left: 0

width: 100%

height: 100%

border-radius: 100%

background: #b9d1f5

border: 1px solid #808aa2

overflow: hidden

z-index: 10

}

.round1 .child{

position: absolute

top: 0

left: 0

width: 50%

height: 100%

background: rgba(0,0,0,0)

border: #808aa2 1px solid

}

.round1 .child:nth-child(1){

transform-origin:100% 50%

transform: rotate(30deg)

z-index: 8

}

.round1 .child:nth-child(2){

transform-origin:100% 50%

transform: rotate(60deg)

z-index: 8

}

.round1 .child:nth-child(3){

transform-origin:100% 50%

transform: rotate(90deg)

z-index: 8

}

.round1 .child:nth-child(4){

transform-origin:100% 50%

transform: rotate(120deg)

z-index: 8

}

.round1 .child:nth-child(5){

transform-origin:100% 50%

transform: rotate(150deg)

z-index: 8

}

.round2{

position: absolute

top: 12.5%

left: 12.5%

width: 75%

height: 75%

border-radius: 100%

background: #b3b0fb

border: 1px solid #808aa2

z-index: 100

}

.round3{

position: absolute

top: 25%

left: 25%

width: 50%

height: 50%

border-radius: 100%

background: #ebbbff

border: 1px solid #808aa2

z-index: 200

}

.round4{

position: absolute

top: 37.5%

left: 37.5%

width: 25%

height: 25%

border-radius: 100%

background: #ff91e5

border: 1px solid #2c8a33

z-index: 300

}

</style>

</head>

<body>

<div class="box">

<!---->

<div class="round1">

<div class="child"></div>

<div class="child"></div>

<div class="child"></div>

<div class="child"></div>

<div class="child"></div>

<div class="child"></div>

</div>

<!---->

<!---->

<div class="round2">

</div>

<!---->

<!---->

<div class="round3">

</div>

<!---->

<!---->

<div class="round4">

</div>

<!---->

</div>

</body>

</html>

padding是内边距,块级元素边框内元素和边框之间的距离,padding-left就是指定这个元素内的直接子元素的边框距离该元素内边框的距离。就好比同心圆的圆环宽度。 305px是距离单位。\9是错误写法。

<style>

html,body {margin:0 padding:0 overflow:hidden}

section {width:100vw height:100vw}

div {width:calc(100% - 5vw) height:calc(100% - 5vw) padding:2vw border:0.5vw solid black border-radius:50%}

</style>

<section></section>

<script>

window.onload=function(){

    var divs=document.getElementsByTagName("section")[0]

    for(var i=0i<20i++){

        divs.appendChild(document.createElement("div"))

        divs=divs.firstChild

    }

}

</script>