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