zoukankan      html  css  js  c++  java

  • DIV+CSS圆角边框

    简洁型css圆角：

     方法1：

    简洁型css圆角矩形

    code1:

    复制代码
    <style type="text/css">
    .b1,.b2,.b3,.b4,.b1b,.b2b,.b3b,.b4b,.b    {display:block;overflow:hidden;}
    .b1,.b2,.b3,.b1b,.b2b,.b3b    {height:1px;}
    .b2,.b3,.b4,.b2b,.b3b,.b4b,.b    {border-left:1px solid #999;border-right:1px solid #999;}
    .b1,.b1b    {margin:0 5px;background:#999;}
    .b2,.b2b    {margin:0 3px;border-width:2px;}
    .b3,.b3b    {margin:0 2px;}
    .b4,.b4b    {height:2px;margin:0 1px;}
    .d1    {background:#F7F8F9;}
    .k     {height:300px;}
    </style>
    </head>

    <body>
    <div>
    <b class="b1"></b><b class="b2 d1"></b><b class="b3 d1"></b><b class="b4 d1"></b>
    <div class="b d1 k">
    <font style="font-size:26px;color:red; margin:0px 10px;">简洁型css圆角矩形</font>
    </div>
    <b class="b4b d1"></b><b class="b3b d1"></b><b class="b2b d1"></b><b class="b1b"></b>
    </div>
    复制代码

    方法2：


    无图片实现圆角框

    code2:

    复制代码
    <style type="text/css">
    div.RoundedCorner    {background:#9BD1FA; width:400px;}
    b.rtop, b.rbottom    {display:block;background: #FFF}
    b.rtop b, b.rbottom b    {display:block;height: 1px;overflow: hidden; background: #9BD1FA}
    b.r1    {margin: 0 5px}
    b.r2    {margin: 0 3px}
    b.r3    {margin: 0 2px}
    b.rtop b.r4, b.rbottom b.r4    {margin: 0 1px;height: 2px}
    </style>
    <div class="RoundedCorner">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <br>无图片实现圆角框<br><br>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>
    复制代码

    3D圆角矩形:

    3D圆角矩形

    CODE:

    复制代码
    <style type="text/css">
    .raised    {background:transparent;width:40%;}
    .raised h1,.raised p    {margin:0 10px;}
    .raised h1    {font-size:2em;color:#fff;}
    .raised p    {padding-bottom:0.5em;}
    .raised .b1,.raised .b2,.raised .b3,.raised .b4,.raised .b1b,.raised .b2b,.raised .b3b,.raised .b4b    {display:block;overflow:hidden;font-size:1px;}
    .raised .b1,.raised .b2,.raised .b3,.raised .b1b,.raised .b2b,.raised .b3b    {height:1px;}
    .raised .b2    {background:#ccc;border-left:1px solid #fff;border-right:1px solid #eee;}
    .raised .b3    {background:#ccc;border-left:1px solid #fff;border-right:1px solid #ddd;}
    .raised .b4    {background:#ccc;border-left:1px solid #fff;border-right:1px solid #aaa;}
    .raised .b4b    {background:#ccc;border-left:1px solid #eee;border-right:1px solid #999;}
    .raised .b3b    {background:#ccc;border-left:1px solid #ddd;border-right:1px solid #999;}
    .raised .b2b    {background:#ccc;border-left:1px solid #aaa;border-right:1px solid #999;}
    .raised .b1    {margin:0 5px;background:#fff;}
    .raised .b2, .raised .b2b    {margin:0 3px;border-width:0 2px;}
    .raised .b3, .raised .b3b    {margin:0 2px;}
    .raised .b4, .raised .b4b    {height:2px; margin:0 1px;}
    .raised .b1b    {margin:0 5px; background:#999;}
    .raised .boxcontent    {display:block;background:#ccc;border-left:1px solid #fff;border-right:1px solid #999;}
    </style>
    </head>

    <body>

    <div class="raised">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    <h1>3D圆角矩形</h1>
    </div>
    <b class="b4b"></b><b class="b3b"></b><b class="b2b"></b><b class="b1b"></b>
    </div>
    复制代码

     反向css圆角矩形:

    反向css圆角矩形

    CODE:

    复制代码
    <style type="text/css">
    .serif     {
      background    : transparent; width:40%;
          }
    .serif h1, .serif p     {
      margin    :0 10px;
          }
    .serif h1     {
      font-size    :2em; color:#fff;
          }
    .serif p     {
      padding-bottom    :0.5em;
          }
    .serif .b1, .serif .b2, .serif .b3, .serif .b4     {
      display    :block; 
      overflow    :hidden;
      font-size    :1px;
          }
    .serif .b1, .serif .b2, .serif .b3     {
      height    :1px;
          }
    .serif .b2, .serif .b3     {
      background    :#fc0; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff;
          }
    .serif .b4     {
      background    :#fc0; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff;
          }
    .serif .b1     {
      margin    :0; background:#fff;
          }
    .serif .b2     {
      margin    :0 1px; 
      border-width    :0 2px;
          }
    .serif .b3     {
      margin    :0 3px;
          }
    .serif .b4     {
      height    :2px; 
      margin    :0 4px;
          }
    .serif .boxcontent     {
      display    :block;  
      background    :#fc0; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff; 
      margin    :0 5px;
          }

    </style>

    <div class="serif">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    <h1>反向css圆角矩形</h1>
    </div>
    <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
    </div>
    复制代码

    略带菱形的css圆角:

    略带菱形的css圆角矩形

    CODE:

    复制代码
    <style type="text/css">
    .curved     {
      background    :transparent; 
      width    :40%;
          }
    .curved h1, .curved p     {
      margin    :0 10px;
          }
    .curved h1     {
      font-size    :2em; 
      color    :#fff;
          }
    .curved p     {
      padding-bottom    :0.5em;
          }
    .curved .b1, .curved .b2, .curved .b3, .curved .b4     {
      display    :block; 
      overflow    :hidden; 
      height    :1px;
      font-size    :1px;
          }
    .curved .b2, .curved .b3, .curved .b4     {
      background    :#e0cea3; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff;
          }
    .curved .b1     {
      margin    :0 4px; 
      background    :#fff;
          }
    .curved .b2     {
      margin    :0 4px; 
      height    :2px;
          }
    .curved .b3     {
      margin    :0 3px;
          }
    .curved .b4     {
      margin    :0; 
      height    :1px; 
      border-width    :0 3px 0 3px;
          }
    .curved .boxcontent     {
      display    :block; 
      background    :#e0cea3; 
      border    :0 solid #fff; 
      border-width    :0 1px;
          }
    </style>

    <div class="curved">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
    <div class="boxcontent">
    <h1>略带菱形的css圆角矩形</h1>
    </div>
    <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
    </div>
    复制代码

    特殊CSS圆角：

    特殊css圆角矩形

    CODE：

    复制代码
    <style type="text/css">
    .pillar     {
      background    :transparent; 
      width    :40%;
          }
    .pillar h1, .pillar p     {
      margin    :0 10px;
          }
    .pillar h1     {
      font-size    :2em; 
      color    :#fff;
          }
    .pillar p     {
      padding-bottom    :0.5em;
          }
    .pillar .b1, .pillar .b2, .pillar .b3, .pillar .b4     {
      display    :block; 
      overflow    :hidden;
      font-size    :1px;
          }
    .pillar .b1, .pillar .b2, .pillar .b4     {
      height    :1px;
          }
    .pillar .b2, .pillar .b3     {
      background    :#d66; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff;
          }
    .pillar .b4     {
      background    :#d66; 
      border-left    :4px solid #fff; 
      border-right    :4px solid #fff;
          }
    .pillar .b1     {
      margin    :0 2px; 
      background    :#fff;
          }
    .pillar .b2     {
      margin    :0 1px; 
      border-width    :0 1px;
          }
    .pillar .b3     {
      height    :2px; 
      margin    :0;
          }
    .pillar .b4     {
      margin    :0 2px;
          }
    .pillar .boxcontent     {
      display    :block; 
      background    :#d66; 
      border-left    :1px solid #fff; 
      border-right    :1px solid #fff; 
      margin    :0 5px;
          }
    </style>

    <div class="pillar">
    <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b4"></b>
    <div class="boxcontent">
    <h1>特殊css圆角矩形</h1>
    </div>
    <b class="b4"></b><b class="b2"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
    </div>
    复制代码
     
     
     
    转载请注明出处：
    作者：wy811007
    出处：http://wy811007.cnblogs.com
    本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
  • 相关阅读:
    深入解析ES6中的promise
    深入解析ES6中的promise
    2019年底前的web前端面试题初级-web标准应付HR大多面试问题
    2019年底前的web前端面试题初级-web标准应付HR大多面试问题
    ES6基础-ES6的扩展
    ES6基础-ES6的扩展
    小程序-优化，部署，细节功能
    小程序-优化，部署，细节功能
    小程序基础-组件
    小程序基础-组件
  • 原文地址：https://www.cnblogs.com/wy811007/p/border_radius.html
Copyright © 2011-2022 走看看