如何用css实现6宫格图标

巴扎黑

Lepaskan： 2017-03-30 14:43:45

asal

3255 orang telah melayarinya

<!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>

Salin selepas log masuk

Atas ialah kandungan terperinci 如何用css实现6宫格图标 . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：

css，6宫格图标

sumber：php.cn

Artikel sebelumnya：用css写三角形的方法 Artikel seterusnya：如何使用CSS来进行网页排版

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang