css条纹边框代码实例
分类：实例代码
分享一段代码实例，它利用不同的方式实现了条纹边框效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
div {
position: relative;
width: 180px;
height: 180px;
border: 20px dashed #2196f3;
margin: 50px;
float: left;
}
.style_one {
background: #9c27b0;
}
.style_one::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #fff;
}
.style_two {
background: #fff;
background-clip: padding-box;
}
.style_two::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
bottom: -20px;
right: -20px;
background: #996699;
z-index: -1;
}
.style_three {
border-radius: 50%;
background-image: radial-gradient(#ffffff 90px, rgba(0, 0, 0, 0) 90px);
background-repeat: no-repeat;
}
.style_three::after {
content: "";
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
background: deeppink;
z-index: -1;
border-radius: 50%;
}
.style_shadow {
background: yellowgreen;
box-shadow: inset 180px 0 0 0 #fff;
}
.style_outline {
border: 20px solid #2196f3;
}
.style_outline::before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
outline: 20px dashed #ffc107;
}
</style>
</head>
<body>
<!-- 中间白色底色是伪元素 -->
<div class='style_one'></div>
<!-- 中间白色底色是背景色 -->
<div class='style_two'></div>
<!-- 径向渐变 -->
<div class='style_three'></div>
<!-- 内阴影 -->
<div class='style_shadow'></div>
<!-- outline + 伪类 -->
<div class='style_outline'></div>
</body>
</html>
