边框css

一、

1、边框不占宽度：box-sizing:border-box;

2、边框不重叠：在边框的方向定义和边框大小相同的负值距离

margin-right: -1px;

3、table边框不重叠：

 
table{ 
border-collapse:collapse; 
} 
table tr{ 
border:1px solid red; 
} 

 二、边框上加文字：

<div class="body">
    <fieldset class="list-field">
      <legend class="list-legend">标题</legend>
      <div class="list-div">
        内容
      </div>
    </fieldset>
  </div>

.body {
  width: 50%;
  .list-field {
    border: 1px solid black;
    .list-legend {
      font-size: 18px;
      color: red;
    }
    .list-div {
      margin: 0 auto;
      text-align: center;
    }
  }
}

三、自适应正圆边框：

1、高度和宽度不固定时，自适应圆形边框：

<div class="adaptive-circle">
    <div class="layout middle">
        <div>
            <h2>自适应标题</h2>
            <p>自适应结束</p>
        </div>
    </div>
</div>

<style>
    .adaptive-circle {
        margin: 50px auto 0;
        width: 80%;
        height: 0;
        padding-top: 80%;

        border-radius: 100%;
        border: 1px solid #000;
        box-sizing: border-box;

        position: relative;
    }
    .adaptive-circle .layout {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        text-align: center;
    }
    .adaptive-circle .layout.middle:before {
        display: inline-block;
        vertical-align: middle;

        content: '';
        height: 100%;
        width: 0;
        overflow: hidden;
    }
    .adaptive-circle .layout.middle div:first-child {
        display: inline-block;
        vertical-align: middle;
    }
</style>

2、如果需要改成圆环，只需要修改中间div的布局：

 .adaptive-circle .layout {
            position: absolute;
            left: 5%;
            top: 5%;
            width: 90%;
            height: 90%;
            overflow: hidden;
            text-align: center;
            background-color: red;
            border-radius: 50%;
          }

3、圆环旋转，内容不动效果：可以设置外层div旋转，然后内层div反向旋转，来抵消外层的旋转制造中间内容不动的假象：

<div class="adaptive-circle">
                      <div class="layout middle  total">
                        <div>
                          <p class="number">数字</p>
                          <p class="title">标题</p>
                        </div>
                      </div>
                    </div>

  //自适应正圆边框
          .adaptive-circle {
            width: 100%;
            height: 0;
            padding-top: 100%;
            border-radius: 100%;
            border: 3px dashed #00ccff;
            box-sizing: border-box;
            position: relative;
            //旋转
            -webkit-animation: circle-reverse 8s infinite linear; /*匀速 循环*/
          }
          .adaptive-circle .layout {
            position: absolute;
            left: 5%;
            top: 5%;
            width: 90%;
            height: 90%;
            overflow: hidden;
            text-align: center;
            border-radius: 50%;
            //旋转
            -webkit-animation: circle 8s infinite linear; /*匀速 循环*/
          }
          @-webkit-keyframes circle {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(-360deg);
            }
          }
          @-webkit-keyframes circle-reverse {
            0% {
              transform: rotate(-360deg);
            }
            100% {
              transform: rotate(0deg);
            }
          }
          .adaptive-circle .layout.middle:before {
            display: inline-block;
            vertical-align: middle;
            content: '';
            height: 100%;
            width: 0;
            overflow: hidden;
          }
          .adaptive-circle .layout.middle div:first-child {
            display: inline-block;
            vertical-align: middle;
          }
 .total {
            background-color: #071a43;
            border-color: #071a43;
            //标题
            .number {
              color: #00ffff;
            }
            .title {
              color: #ffffff;
            }
          }

四、边框阴影：

1、单边阴影：

（1）阴影模糊半径为0：主要通过box-shadow的水平和垂直阴影的偏移量 来实现，其中x-offset为正值时，生成右边阴影，反之为负值时，生成左边阴影；y-offset为正值时，生成底部阴影，反之为负值时生成顶部阴影

<html lang="en-US"> 
<head> 
  <meta charset="UTF-8"> 
  <title>box-shadow设置单边阴影效果title> 
  <style type="text/css"> 
    .box-shadow {  
      width: 200px;  
      height: 100px;  
      border-radius: 5px;  
      border: 1px solid #ccc;  
      margin: 20px;  
    }  
    .top {  
      box-shadow: 0 -2px 0 red;  
    }  
    .right {  
      box-shadow: 2px 0 0 green;  
    }  
    .bottom {  
      box-shadow: 0 2px 0 blue;  
    }  
    .left {  
      box-shadow: -2px 0 0 orange;  
    }  
  style> 
head> 
<body> 
  <div class="box-shadow top">div> 
  <div class="box-shadow right">div> 
  <div class="box-shadow bottom">div> 
  <div class="box-shadow left">div> 
body> 
html> 

（2）有模糊值的单边阴影效果：

.top {  
      box-shadow: 0 -4px 5px -3px red;  
    }  
    .right {  
      box-shadow: 4px 0 5px -3px green;  
    }  
    .bottom {  
      box-shadow: 0 4px 5px -3px blue;  
    }  
    .left {  
      box-shadow: -4px 0 5px -3px orange;  
    } 

2、多边阴影：

（1）box-shadow:4px 4px 5px 3px #999; 

（2）box-shadow:4px 4px 5px #999;     

（3）box-shadow:-4px -4px 5px #999; 

(4)box-shadow:0 0 9px 3px #999; 

五、通过边框实现矩形嵌圆：

 

 

 .empty {
        width: 250px;
        font-size: 16px;
        text-align: center;
        height: 200px;
        color: yellow;
        background-color: #169bd5;
        content: '';
      }
      .user-info {
        max-width: 250px;
        min-height: 250px;
        max-height: 250px;
        font-size: 16px;
        text-align: center;
        //line-height: 250px;
        background-color: #169bd5;
        border-radius: 50%;
        margin-top: -100px;
        border: 2px solid white;
        display: flex;
        color: #f0f2f5;
        justify-content: center; /* 水平方向 居中*/
        align-items: center; /* 垂直方向 居中*/
      }

  <div class="empty"></div>
  <div class="user-info">
         内容
  </div>