用css3画个同心圆-CSS 튜토리얼-php.cn

用css3画个同心圆

php中世界最好的语言

풀어 주다： 2018-03-21 17:06:20

원래의

2289명이 탐색했습니다.

这次给大家带来用css3画个同心圆，用css3画个同心圆的注意事项有哪些，下面就是实战案例，一起来看一下。

基本思路

首先你得画三个圆吧，那三个圆怎么重叠到一块呢？这个就得靠-margin来控制了。

로그인 후 복사

css

        #t1 {
            float:left;
            width:150px;
            height:150px;
            background: pink;
            border-radius:75px ;
        }
        #t2 {    
            float:left;
            width:100px;
            height:100px;
            margin-left:-125px;/*move to left 125px*/
            margin-top:25px;/* move to bottom 25px*/
            background: green;
            border-radius: 50px;
        }
        #t3 {
            float:left;
            width:50px;
            height:50px;
            margin-left:-100px;/*move left 100px*/
            margin-top:50px;
            background: yellow;
            border-radius: 25px;
        }

로그인 후 복사

结果