基础 - CSS边框

 

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

　　

* {
    margin: 0;
    border: 0;
    padding: 0;
}

.box {
    position: relative;
}
.box .part {
    position: absolute;
    background: #DDDDDD;
}

.box .part div{
    width: 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;
    width: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: "";
    width: 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 {
    width: 100px;
    height: 100px;
    border: 5px solid #C81623;
    box-shadow: 2px 2px 5px 0 #432566;
}

加 inset 内部的阴影

不加 inset 外部的阴影