纯静态的一种效果绘制，避免使用图标浪费内存。效果如下
废话不多说，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style type="text/css">
#app{
width:300px;height:200px;position: relative;box-sizing: border-box;padding:10px;
}
.box{
width:100%;height:100%;border:2px solid #f00;
}
.circle{
display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;
}
.top-left{
left:10px;top: 10px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;
}
.top-right{
right: 5px;top: 10px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;
}
.btm-left{
left: 10px;bottom:6px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;
}
.btm-right{
right: 6px;bottom: 6px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box"></div>
<i class="circle top-left"></i>
<i class="circle top-right"></i>
<i class="circle btm-left"></i>
<i class="circle btm-right"></i>
</div>
</body>
</html>
效果二：
相比第一种效果，增加了四角的曲别针效果，完整代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle</title>
<style type="text/css">
.cont{
height:300px;
box-sizing: border-box;padding:10px;
position: relative;
} .icon-box{
width:60px;height:60px;border:2px solid #f00;position: absolute;overflow: hidden;
}
.icon-top-left{
left: 0;top: 0;border-right-color: transparent;border-bottom-color: transparent;border-radius:10px 0 0 0;
}
.icon-top-right{
right: 0;top: 0;border-left-color: transparent;border-bottom-color: transparent;border-radius:0 10px 0 0;
}
.icon-btm-left{
left: 0;bottom: 0;border-right-color: transparent;border-top-color: transparent;border-radius:0 0 0 10px;
}
.icon-btm-right{
right: 0;bottom: 0;border-left-color: transparent;border-top-color: transparent;border-radius:0 0 10px 0;
} .icon-box i{
display: block;width:18px;height:18px;border-radius:50%;border:2px solid #f00;position: absolute;z-index: 2;
}
.icon-top-left i{
left: -2px;top: -2px;
}
.icon-top-right i{
right: -2px;top: -2px;
}
.icon-btm-left i{
left: -2px;bottom: -2px;
}
.icon-btm-right i{
right: -2px;bottom: -2px;
} .app{
width:100%;height:100%;
position: relative;box-sizing: border-box;padding:5px 7px 7px 6px;
}
.box{
width:100%;height:100%;border:2px solid #f00;
}
.circle{
display: block;width:20px;height:20px;border:2px solid transparent;position: absolute;z-index: 1;background:#fff;
}
.top-left{
left:6px;top: 5px;border-right-color: #f00;border-bottom-color: #f00;border-radius:0 0 20px 0;
}
.top-right{
right: 3px;top:5px;border-left-color: #f00;border-bottom-color: #f00;border-radius:0 0 0 20px;
}
.btm-left{
left: 6px;bottom:3px;border-right-color: #f00;border-top-color: #f00;border-radius:0 20px 0 0;
}
.btm-right{
right: 3px;bottom: 3px;border-left-color: #f00;border-top-color: #f00;border-radius:20px 0 0 0;
}
.box img{
display: block;width:100%;height:100%;
}
</style>
</head>
<body>
<div class="cont">
<div class="icon-box icon-top-left"><i></i></div>
<div class="icon-box icon-top-right"><i></i></div>
<div class="icon-box icon-btm-left"><i></i></div>
<div class="icon-box icon-btm-right"><i></i></div>
<div class="app">
<div class="box"><img src="img_src" alt=""></div>
<i class="circle top-left"></i>
<i class="circle top-right"></i>
<i class="circle btm-left"></i>
<i class="circle btm-right"></i>
</div>
</div>
</body>
</html>