您的当前位置:首页如何用css实现6宫格图标

如何用css实现6宫格图标

2020-11-27 来源:小侦探旅游网
<!DOCTYPE html>
<html lang="en">
 <head>
 <title>Unicorn Admin</title>
 <meta charset="UTF-8" />
 <style type="text/css" media="screen">
 .test{
 width:100px;
 height: 100px;
 background-color: gray;
 }
 .test:after{
 content: "";
 display: block;
 width: 100%;
 height: 33.3%;
 border-top: 1px solid white;
 border-bottom: 1px solid white;
 margin-top: -66.6%;
 }
 .test:before{
 content: "";
 display: block;
 width: 33%;
 height: 100%;
 border-right: 2px solid white;
 }
 </style>
 </head> 
 <body >
 <p>
 <p class="test">
 </p>
 </p>
 </body>
</html>

-->
显示全文