zoukankan      html  css  js  c++  java
  • border家族

    border-style:dotted solid double dashed(上边框是点状,右边框是实线,下边框是双线,左边框是虚线)边框样式;
    border-width(边框宽度);
    border-radius(创建圆角);
    border-color(边框颜色);
    border-shadow(添加阴影);

    案例1:太极图

    HTML:

    <div id="a1"></div>

    CSS:

    #a1 {  96px !important; height: 48px !important; background: #fff; border-color: #E8339B; border-style: solid;border- 2px 2px 50px 2px; border-radius: 100%; position: relative; }

    #a1:before { content: ""; position: absolute; top: 50%; left: 0; background: #fff;border: 18px solid #E8339B; border-radius: 100%;  12px; height: 12px; }

    #a1:after { content: ""; position: absolute; top: 50%; left: 50%; background: #E8339B;border: 18px solid #fff; border-radius:100%;  12px; height: 12px; }

    最终效果:

     案例2:三角

    HTML:

    <div id="b1"></div>

    CSS:

    #b1 { 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}

    同理,

    三角形向下:

    #b1 { 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid #d40834;}

    三角形right:

    #b1 { 0;height: 0;border-left: 100px solid #d40834;border-right: 50px solid transparent;border-top: 100px solid #d40834;}

    三角形left:

    #b1 { 0;height: 0;border-left: 50px solid transparent;border-right: 100px solid #d40834;border-top: 100px solid #d40834;}

    三角形top left:

    #b1 { 0;height: 0;   border-top: 100px solid red;border-right: 100px solid transparent;}

    三角形top right:

    #b1 { 0;height: 0;border-left: 100px solid transparent;border-top: 100px solid #d40834;}

    三角形bottom right:

    #b1 { 0;height: 0;border-left: 100px solid transparent;border-bottom: 100px solid #d40834;}

    三角形bottom left:

    #b1 { 0;height: 0;border-right: 100px solid transparent;border-top: 100px solid #d40834;}

  • 相关阅读:
    ES6-11学习笔记--深拷贝与浅拷贝
    ES6-11学习笔记--对象的扩展
    ES6-11学习笔记--箭头函数
    ES6-11学习笔记--扩展运算符与rest参数
    ES6-11学习笔记--函数的参数
    ES6-11学习笔记--数组的扩展
    ES6-11学习笔记--解构赋值
    ES6-11学习笔记--数组遍历
    班课2
    班课1
  • 原文地址:https://www.cnblogs.com/Jinmj/p/4795564.html
Copyright © 2011-2022 走看看