一、

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

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

margin-right: -1px;

3、table边框不重叠：

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

 二、边框上加文字：

边框css-编程之家

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

边框css-编程之家

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

边框css-编程之家

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

边框css-编程之家

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

边框css-编程之家

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

边框css-编程之家

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

边框css-编程之家 

 

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