zoukankan      html  css  js  c++  java
  • 实现CSS圆环

    1. 使用border
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              div{
                  width: 200px;
                  height: 200px;
                  background: brown;
                  border: 50px solid greenyellow;
                  border-radius: 50%;
              }
          </style>
      </head>
      <body>
          <div></div>
      </body>
      </html>
      View Code
    2. 两个嵌套div
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .father{
                  width: 200px;
                  height: 200px;
                  background: greenyellow;
                  border-radius: 50%;
              }
              .son{
                  width: 100px;
                  height: 100px;
                  background: brown;
                  border-radius: 50%;
      
                  position: relative;
                  top: 50px;
                  left: 50px;
      
                  /* position: relative;
                  top: 50px;
                  left: 50px; */
              }
          </style>
      </head>
      <body>
          <div class="father">
              <div class="son"></div>
          </div>
      </body>
      </html>
      定位
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              .father{
                  width: 200px;
                  height: 200px;
                  background: greenyellow;
                  border-radius: 50%;
                  
                  position: absolute;
                  /* position: fixed;
                  float: left/right;
                  overflow: hidden;
                  display: inline-block; */
              }
              .son{
                  width: 100px;
                  height: 100px;
                  background: brown;
                  border-radius: 50%;
                  margin: 50px;
              }
          </style>
      </head>
      <body>
          <div class="father">
              <div class="son"></div>
          </div>
      </body>
      </html>
      触发父级bfc
    3. 使用伪元素,before/after
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              div{
                  width: 200px;
                  height: 200px;
                  background-color: greenyellow;
                  border-radius: 50%;
              }
              div::before{
                  content: "";
                  display: block;
                  width: 100px;
                  height: 100px;
                  border-radius: 50%;
                  background-color: brown;
      
                  position: relative;
                  top: 50px;
                  left: 50px;
                  
                  /* position: absolute;
                  margin: 50px; */
              }
          </style>
      </head>
      <body>
          <div></div>
      </body>
      </html>
      View Code
    4. 使用border-shadow
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              div{
                  width: 200px;
                  height: 200px;
                  background-color: greenyellow;
                  border-radius: 50%;
                  box-shadow: 0 0 0 50px brown inset;
              }
          </style>
      </head>
      <body>
          <div></div>
      </body>
      </html>
      View Code
    5. 使用radial-gradient
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              div{
                  width: 200px;
                  height: 200px;
                  border-radius: 50%;
                  background: -webkit-radial-gradient( circle closest-side,greenyellow 50%,brown 50%);
              }
          </style>
      </head>
      <body>
          <div></div>
      </body>
      </html>
      径向渐变

      

  • 相关阅读:
    c#_表单处理方式
    C#_在.net中序列化读写xml方法的总结
    Jquery_异步上传文件多种方式归纳
    C#_Jquery无刷新上传
    构造方法的作用
    ssh项目问题01,为创建数据库抛出的异常
    成员方法的使用及其调用
    静态页面的使用和操作
    oa项目环境搭建的操作步骤详解
    写做顺序
  • 原文地址:https://www.cnblogs.com/Rooney10/p/12984841.html
Copyright © 2011-2022 走看看