• 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> 

    申明

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

    博文欢迎转载，但请给出原文连接。
  • 相关阅读:
    Go 场景
    sourcetree clone 提示url无效
    简单去重比较/复杂数据去重处理
    vue组件之间的通信
    js-执行机制之同步、异步、宏任务、微任务
    react生命周期
    git push被忽略的文件 处理
    请求头的属性
    运算精度问题https://blog.csdn.net/smile_ping/article/details/80284969
    react中状态提升
  • 原文地址：https://www.cnblogs.com/Athrun/p/1202311.html
Copyright © 2020-2023  润新知