zoukankan      html  css  js  c++  java

  • CSS实现圆角的三种方法

    /*第一种：*/

    <Html>
    <head>
    <style>
    #a    {
    border-left    :1px #333 solid;
    border-right    :1px #333 solid;
    width    :300px;
    height    :500px;
    }
    .b    {
    height    :1px;
    overflow    :hidden;
    border-left    :1px #333 solid;
    border-right    :1px #333 solid;
    }
    </style>
    </head>
    <body>
    <div>
    <div class="b" style="margin-left:3px;294px;background:#333"></div>
    <div class="b" style="margin-left:2px;296px;"></div>
    <div class="b" style="margin-left:1px;298px;"></div>
    <div id="a">
    </div>
    </div>
    </body>
    </Html>
    /*第二种：*/

    <html>
    <head>
    <title>css圆角效果</title>
    <meta http-equiv="content-type" c>
    <style type="text/css">
    div.RoundedCorner    {background: #9BD1FA}
    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>
    </head>
    <body>
    <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>
    </body>
    </html>
    /*第三种：*/

    <style>
    .divfloat     {
    margin    :0 0 10px 0;
    background    : transparent; 
    }

    .roundtop,.roundbottom    {
    display    :block; 
    font-size    :1px;
    width    : 100%;
    background    :transparent;
    }

    .roundb1,.roundb2,
    .roundb3,.roundb4     {
    display    :block; 
    overflow    :hidden;
    }

    .roundb1,.roundb2,.roundb3     {
    height    :1px;
    border-left    :1px solid #9B9B9B; 
    border-right    :1px solid #9B9B9B;
    background    :#F3F3F3;
    }

    .roundb1     {margin:0 5px;background:#9B9B9B;}
    .roundb2     {margin:0 3px;border-width:0 2px;}
    .roundb3     {margin:0 2px;}
    .roundb4     {
    height    :2px; 
    margin    :0 1px;
    border-left    :1px solid #9B9B9B; 
    border-right    :1px solid #9B9B9B;
    background    :#F3F3F3;
    }

    .roundboxcontent     {
    display    :block; 
    padding    :5px; 
    height    :100%; 
    overflow    :hidden;
    border    :0 solid #9B9B9B;
    border-width    :0 1px;
    background    :#F3F3F3;
    }
    </style>

    <div class="divfloat">
    <b class="roundtop">
    <b class="roundb1"></b>
    <b class="roundb2"></b>
    <b class="roundb3"></b>
    <b class="roundb4"></b>
    </b>
    <div class="roundboxcontent">
      <div class="sidebarwrap">
      这是圆角div内容部分
      </div>
    </div>
    <b class="roundbottom">
      <b class="roundb4"></b>
      <b class="roundb3"></b>
      <b class="roundb2"></b>
      <b class="roundb1"></b>
    </b>
    </div> 

    申明

    非源创博文中的内容均收集自网上，若有侵权之处，请及时联络，我会在第一时间内删除．再次说声抱歉!!!

    博文欢迎转载，但请给出原文连接。
  • 相关阅读:
    TCP链接异常断开后，对端仍然ESTABLISH
    mds0: Many clients (191) failing to respond to cache pressure
    Linux C/C++编译过程中的各种not declared in this scope
    Centos7添加磁盘并分区格式化
    Windows Terminal——安装并配置主题
    Kbone——创建项目报错 name can no longer contain capital letters
    Redis——大批量删除redis的key
    Redis——设置最大内存 | key淘汰机制
    Nightingale——滴滴夜莺部署【一】
    ELK——使用Docker快速搭建
  • 原文地址：https://www.cnblogs.com/Athrun/p/1202311.html
Copyright © 2011-2022 走看看