css边框内圆角实现的2种方法
边框内圆角
在学习多重边框的时候我们用到了两个属性box-shandow和outline，outline 描边并不会跟着元素的圆角走，但是box-shandow 是会的。因此我们利用两者的结合便可实现下图的效果
1、思路如下：为元素设置圆角，外层设置轮廓outline。圆角与直角之间的空隙用阴影补齐，阴影的尺寸为圆角半径的一半
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .uu{ margin: 100px; width: 200px; height: 70px; border-radius:10px; background: tan; outline:10px solid #655; box-shadow:0 0 0 5px #655; } </style> </head> <body> <div class="uu"></div> </body> </html> 
2、使用伪元素实现边框内圆角
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .uu{ margin: 100px; position: relative; height: 200px; width: 400px; text-align: center; line-height: 200px; background: #FFF; border-radius: 30px; } .uu::before { content: ''; position: absolute; top: -15px; right: -15px; bottom: -15px; left: -15px; background: #B387DD; z-index: -1; } </style> </head> <body> <div class="uu"></div> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知