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;}

  • 相关阅读:
    在vs2010里使用EF4.3的Code First个人使用笔记
    如何充分利用C#匿名方法的平台优势(转)
    打开Microsoft SQL Server Management Studio 2005非常慢,特别慢的原因
    PowerShell msbuild
    很久没写了
    第一篇博客,逗大家一笑
    以编程方式调用按钮1(button1)的 Click 事件
    VS2010删除已安装的联机模板
    创建和分享你的Visual Studio color
    异步获取CMD命令行输出内容
  • 原文地址:https://www.cnblogs.com/Jinmj/p/4795564.html
Copyright © 2011-2022 走看看