<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css_outline.css"/>
</head>
<body>
<!-- 轮廓在边框外 -->
<div class="div1">
this is div
</div>
</body>
</html>
.div1{
/* dotted - 定义点状的轮廓。
dashed - 定义虚线的轮廓。
solid - 定义实线的轮廓。
double - 定义双线的轮廓。
groove - 定义 3D 凹槽轮廓。
ridge - 定义 3D 凸槽轮廓。
inset - 定义 3D 凹边轮廓。
outset - 定义 3D 凸边轮廓。
none - 定义无轮廓。
hidden - 定义隐藏的轮廓。 */
outline: 2px dotted green;
/* 在轮廓和边框之间加空间 */
outline-offset: 25px;
border: 2px solid red;
width: 300px;
}
