关闭

css 实现6宫格图标

标签: css样式
378人阅读 评论(0) 收藏 举报
分类:
<!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 >
      <div>
        <div class="test">
        </div>
      </div>
  </body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:15697次
    • 积分:368
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:25篇
    • 译文:0篇
    • 评论:1条
    最新评论