1、工具/原料
html css2、具體實現
效果圖
html代碼
| <body> <h1 style="color: red">css實現矩形邊角加粗</h1> <div class="main"> <span></span> <span></span> <span></span> <span></span> </div></body> |
css代碼
| body{ display: flex; justify-content: center; flex-direction: column; align-items: center; } .main{ position: relative; width: 400px; height: 200px; border: 1px solid red; } .main span:nth-child(1){ position: absolute; left: -5px; top: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 5px 0 0 5px; } .main span:nth-child(2){ position: absolute; right: -5px; top: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 5px 5px 0 0; } .main span:nth-child(3){ position: absolute; right: -5px; bottom: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 0 5px 5px 0; } .main span:nth-child(4){ position: absolute; left: -5px; bottom: -5px; padding: 15px; border-style: solid; border-color: rebeccapurple; border-width: 0 0 5px 5px; } |
原理很簡單， 只要弄清position:relative,border和left,top之間的關系就可以了
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
