css+div实现各种常见边框
一、效果图如下
二、实现代码
div { width: 120px; height: 100px; margin: 10px; float: left; text-align: center; line-height: 100px; font-size: 18px; color: #999999; border: 4px solid #797979; } .rounded { border-radius: 30px; } .asymmetric-radius { border-radius: 30px / 90px; } .percentages { border-radius: 50%; } .brackets { border-top: none; border-bottom: none; border-radius: 30px / 90px; } .inner-brackets { border-top: none; border-bottom: none; border-radius: 20px / 70px; } span { width: 100px; height: 90px; margin: 7px; float: left; border: 4px solid #797979; font-size: 18px; color: #797979; } .squarebrackets { border: none; position: relative; width: 200px; height: 100px; padding: 0; margin: 1em; } .squarebrackets:before, .squarebrackets:after { content: ''; display: block; height: 100%; width: 15px; border: 4px solid #797979; position: absolute; top: -5px; } .squarebrackets:before { left: 0; border-right: 0; } .squarebrackets:after { right: 0; border-left: 0; }