<!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>
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论