zoukankan      html  css  js  c++  java
  • 基础

       <div class="box"></div>
    

      

    * {
        margin: 0;
        border: 0;
        padding: 0;
    }
    
    .box {
        position: relative;
    }
    .box .part {
        position: absolute;
        background: #DDDDDD;
    }
    
    .box .part div{
         50%;
        height: 50%;
        border: 1px solid #C81623;
        margin: auto;
    }
    .box .part .JuXing{
        border-radius: 0 0 0 0;
    }
    .box .part .YuanXing{
        border-radius: 50%;
    }
    .box .part .GongXing{
        border-radius: 50% 50% 0  0;
    }
    .box .part .TuoYuan{
        height: 25%;
        border-radius: 50%;
    }
    .box .part .ShanXing{
        border-radius: 100% 0 0 0 ;
    }
    

      

    $(function () {
    
        var $oBox = document.querySelector(".box");
    
        var aClass = ["JuXing","YuanXing","GongXing","TuoYuan","ShanXing"];
        var count = 9;
        for (var i= 0,l=count;i<l;i++  ) {
            var oPart = document.createElement("div");
            oPart.classList.add("part");
            oPart.style.left = 100+i%3*220+"px";
            oPart.style.top = 100+parseInt(i/3)*220+"px";
            oPart.style.width = 210+"px";
            oPart.style.height = 210+"px";
            $oBox.appendChild(oPart);
    
            var oSan = document.createElement("div");
            oSan.classList.add(aClass[i%aClass.length]);
            oPart.appendChild(oSan);
    
        }
    
    
    
    
    
    
    
    });
    

      

    阴阳

    .box .part .YinYang{
        position: relative;
        200px;
        height:100px;
        background: #70e780;
        border-bottom: 100px solid #C81623;
        border-radius: 100px;
    }
    .box .part .YinYang::before,
    .box .part .YinYang::after {
        position: absolute;
        top: 50px;
        content: "";
         20px;
        height: 20px;
        border: 40px solid #8b7edd;
        border-radius: 50px;
    }
    .box .part .YinYang::before{
        left: 2px;
        background-color: #e74961;
        border-color: #70e780;
    }
    .box .part .YinYang::after{
        right: 2px;
        background-color: #70e780;
        border-color: #e74961;
    }
    

      

    边框阴影

    .box {
         100px;
        height: 100px;
        border: 5px solid #C81623;
        box-shadow: 2px 2px 5px 0 #432566;
    }
    

    加 inset 内部的阴影

    不加 inset 外部的阴影

  • 相关阅读:
    快速排序和归并排序的迭代实现
    Longest Increasing Subsequence Review
    IOCCC 1987 最佳单行代码解读
    C++类的成员函数对应的链接器符号的解析
    Scalable Global ID Generator Design
    欧拉回路 (Euler Circuit) POJ 1780
    深入理解函数内静态局部变量初始化
    memcached 线程模型
    类的加载与ClassLoader的理解
    字符集常见码表说明
  • 原文地址:https://www.cnblogs.com/WeWeZhang/p/5820777.html
Copyright © 2011-2022 走看看