效果?

?

html? <!-- 框 --> <div class="win"> <!-- 四个角的边框效果 --> <div class="border_corner border_corner_left_top"></div> <div class="border_corner border_corner_right_top"></div> <div class="border_corner border_corner_left_bottom"></div> <div class="border_corner border_corner_right_bottom"></div> <div class="main"> <!-- 这里写内容 --> </div> </div> CSS .win { margin: 20px; position: relative; display: inline-block; } .main { width: 200px; height: 200px; border: 1px solid rgb(153, 204, 255); border-radius: 4px; } .border_corner{ z-index: 2500; position: absolute; width: 8px; height: 8px; background: rgba(0,0,0,0); border: 2px solid #2f7f9d; } .border_corner_left_top{ top: 0; left: 0; border-right: none; border-bottom: none; border-top-left-radius: 4px; } .border_corner_right_top{ top: 0; right: 0; border-left: none; border-bottom: none; border-top-right-radius: 4px; } .border_corner_left_bottom{ bottom: 0; left: 0; border-right: none; border-top: none; border-bottom-left-radius: 4px; } .border_corner_right_bottom{ bottom: 0; right: 0; border-left: none; border-top: none; border-bottom-right-radius: 4px; } 注意：

1、外层的 class=" win"?必须设置 position:relative/absolute，因为4个角 position 是 absolute；

2、class="main" 设置边框，外层的class=" win" 不能设置，否则4个角会在里面；

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。