关键知识点
1. border-style
border-style 有四个属性:dotted solid double dashed(点状、实线、双线、虚线)
四个属性:上 右 下 左
三个属性:上 左右 下
两个属性:上下 左右
一个属性:上下左右
border-style: dotted solid double dashed;
/*
上边框是点状
右边框是实线
下边框是双线
左边框是虚线
*/
border-style: dotted solid double;
/*
上边框是点状
左右边框是实线
下边框是双线
*/
border-style: dotted solid;
/*
上边框和下边框是点状
右边框和左边框是实线
*/
border-style: dotted;
/*
4个边框都是点状
*/
2. outline
outline: 2px dashed #fff; /* 边框宽度 边框样式 边框颜色 */
3. outline-offset
outline-offset: 5px; /* 可以是负值 */
属性设置轮廓框架在 border 边缘外的偏移
Outlines在两个方面不同于边框:Outlines 不占用空间;Outlines 可能非矩形
4. border-radius
border-radius: 5px; /* 设置边框圆角 */
实现效果
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
div {
margin-left: 200px;
margin-top: 50px;
width:200px;
height: 100px;
}
.box {
background: #000;
border: 20px solid #000;
outline: 2px dashed #fff;/*边框宽度 边框样式 边框颜色*/
outline-offset: -15px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
注:浏览器兼容性,outline-offset 不兼容 IE