zoukankan      html  css  js  c++  java
  • 纯CSS圆环与圆

    1. 两个标签的嵌套:

     
    <div class="element1">
        <div class="child1"></div>
    </div>
    .element1{
                width: 200px;
                height: 200px;
                background-color: lightpink;
                border-radius: 50%;
            }

    .child1{ width: 100px; height: 100px; border-radius: 50%; background-color: #009966; position: relative; top: 50px; left: 50px;   }

    2. 使用伪元素,before/after

     
    <div class="element2"></div>
    .element2{
                width: 200px;
                height: 200px;
                background-color: lightpink;
                border-radius: 50%;
            }
    .element2:after{
                content: "";
                display: block;
                width: 100px;
                height: 100px;
                border-radius: 50%;
                background-color: #009966;
                position: relative;
                top: 50px;
                left: 50px;
            }

    3. 使用border

    <div class="element3"></div>
     .element3{
                width: 100px;
                height: 100px;
                background-color: #009966;
                border-radius: 50%;
                border: 50px solid lightpink ;
            }

    4. 使用border-shadow

     
    <div class="element4"></div>
    .element4{
                width: 100px;
                height: 100px;
                background-color: #009966;
                border-radius: 50%;
                box-shadow: 0 0 0 50px lightpink ;
                margin: auto;
            }
    <div class="element5">
      .element5{
                width: 200px;
                height: 200px;
                background-color: #009966;
                border-radius: 50%;
                box-shadow: 0 0 0 50px lightpink inset;
                margin: auto;
            }

    5. 使用radial-gradient

     
    <div class="element6"></div>
    .element6{
                width: 200px;
                height: 200px;
                border-radius: 50%;
                background: -webkit-radial-gradient( circle closest-side,#009966 50%,lightpink 50%);
            }
  • 相关阅读:
    移动端网页 -- 安卓与IOS兼容
    item上下自动循环滚动显示
    刮刮奖 --- 可以自定义在图层下添加文字等等信息
    内核终端判断,微信?QQ?ipad?IE?移动?Google?opera……
    flexbox布局
    刮刮奖
    constructor
    获取地址栏参数
    this对象
    函数
  • 原文地址:https://www.cnblogs.com/magicg/p/15190142.html
Copyright © 2011-2022 走看看