关于图形四个角css的问题
类似这样的四个角用css怎么实现！谢谢
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
.cro{
width: 100px;
height: 100px;
border: 1px solid #58C4E6;
position: relative;
}
.cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{
position: absolute;
width: 20px;
height: 20px;
border: 1px solid #fff;
z-index: 1;
background: #fff;
}
.cro_left_top{
top: -1px;
left: -1px;
border-radius:0px 0px 20px 0px;
border-bottom: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_top{
top: -1px;
right: -1px;
border-radius:0px 0px 0px 20px;
border-bottom: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
.cro_left_bottom{
left: -1px;
bottom: -1px;
border-radius:0px 20px 0px 0px;
border-top: 1px solid #58C4E6;
border-right: 1px solid #58C4E6;
}
.cro_right_bottom{
right: -1px;
bottom: -1px;
border-radius:20px 0px 0px 0px;
border-top: 1px solid #58C4E6;
border-left: 1px solid #58C4E6;
}
</style>
</head>
<body>
<div class="cro">
<div class="cro_left_top"></div>
<div class="cro_right_top"></div>
<div class="cro_left_bottom"></div>
<div class="cro_right_bottom"></div>
</div>
</body>
</html>
这个好像是背景图片,那个框框不是用css写的,用css写的话,会特别麻烦.
PS一张图片不是更省事儿吗？反正效果也是一样的，望采纳
.cro{ width: 100px; height: 100px; border: 1px solid #58C4E6; position: relative; } .cro_left_top,.cro_right_top,.cro_left_bottom,.cro_right_bottom{ position: absolute; width: 20px; height: 20px; border: 1px solid #fff; z-index: 1; background: #fff; } .cro_left_top{ top: -1px; left: -1px; border-radius:0px 0px 20px 0px; border-bottom: 1px solid #58C4E6; border-right: 1px solid #58C4E6; } .cro_right_top{ top: -1px; right: -1px; border-radius:0px 0px 0px 20px; border-bottom: 1px solid #58C4E6; border-left: 1px solid #58C4E6; } .cro_left_bottom{ left: -1px; bottom: -1px; border-radius:0px 20px 0px 0px; border-top: 1px solid #58C4E6; border-right: 1px solid #58C4E6; } .cro_right_bottom{ right: -1px; bottom: -1px; border-radius:20px 0px 0px 0px; border-top: 1px solid #58C4E6; border-left: 1px solid #58C4E6; }
百度到的，自己试了一下，内陷的四角可以实现，其它你自己再适当调整