<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<style> ???div { ???????position: relative; ???????left: 50px; ???????top: 50px; ???????margin: 10px; ???????width: 500px; ???????height: 100px; ???????border: 1px solid #E3581D; ???} ???????.border { ???????position: absolute; ???????padding: 5px; ???????border-style: solid; ???????border-color: #E3581D; ???} ???????.row1 { ???????border-width: 5px 0 0 5px; ???????top: -5px; ???????left: -5px; ???????border-radius: 4px 0 0 0; ???} ???????.row2 { ???????border-width: 5px 5px 0 0; ???????top: -5px; ???????right: -5px; ???} ???????.col1 { ???????border-width: 0 0 5px 5px; ???????bottom: -5px; ???????left: -5px; ???} ???????.col2 { ???????border-width: 0 5px 5px 0; ???????bottom: -5px; ???????right: -5px; ???} ???</style></head><body> ???<div> ???????<span class="border row1"></span> ???????<span class="border row2"></span> ???????<span class="border col1"></span> ???????<span class="border col2"></span> ???</div></body></html>
css 四周边框角加粗效果
原文地址：https://www.cnblogs.com/Byme/p/10559472.html