用纯css实现某个元素的双边框效果,边框大小都为5,如图
方法一:
background:green;
border:5px solid red;
outline:5px solid black;
测试用例:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双边框效果</title> <style type="text/css"> .sun{ width:100px; height:100px; font-size:45px; font-weight:bold; line-height:100px; background:green; border:5px solid red; outline:5px solid black; } </style> </head> <body> <div class="sun">元素</div> </body> </html>
方法二:
background:green;
box-shadow:0 0 0 5px red,0 0 0 10px black;
测试用例:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双边框效果</title> <style type="text/css"> .sun{ width:100px; height:100px; font-size:45px; font-weight:bold; line-height:100px; background:green; box-shadow:0 0 0 5px red,0 0 0 10px black; } </style> </head> <body> <div class="sun">元素</div> </body> </html>