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>
      径向渐变

      

  • 相关阅读:
    http://git.oschina.net/
    六、jquery操作下拉列表
    在线JS/CSS/HTML压缩,格式化
    网站安全考虑:1、sql注入 2、跨站脚本攻击
    Thinkphp列表搜索排序-----查
    控制器里面打印sql语句
    Thinkphp增加操作(Controller到模型Model的逻辑)
    将文本转换成语音
    随点击来改变按钮的style
    那些年挠头的git
  • 原文地址:https://www.cnblogs.com/Rooney10/p/12984841.html
Copyright © 2011-2022 走看看