使用css偽類before／after實現(xiàn) 正方形三宮格、正方形六宮格、正方形九宮格

CNZPH 發(fā)布于2019-08-30 15:44 / 1759人閱讀

摘要：結構圖解析后記

結構圖解析：

后記


  
    
      12321
    
  




.test-box{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    .test-item{
      flex:0 0 33.33%;
      position: relative;
      &::before{
        content: " ";
        display:block;
        padding-bottom:100%;
      }
      &:after{
        content: " ";
        transform-origin: center;
        box-sizing: border-box;
        position: absolute;
        top:-50%;
        left:-50%;
        right:-50%;
        bottom:-50%;
        border-color: #c8c7cc;
        border-style: solid;
        border-width: 1px;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5);
        border-top-width: 0;
        border-left-width: 0;
      }
    }
    .test-content{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
}

云服務器 GPU云服務器正方形正方形圖案 php圓角正方形正方

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/116196.html

css如何實現(xiàn)n宮格布局?

摘要：常見應用場景現(xiàn)在的界面基本都是大同小異宮格布局現(xiàn)在基本成了每個必然的存在帶邊框常用在功能導航頁面無邊框常用在首頁分類設計目標在環(huán)境下通過實現(xiàn)宮格并且可以支持有無邊框和每個格是否正方形有邊框且每個格為正方形無邊框最終效果百分比小技巧先解釋一個常見應用場景現(xiàn)在的APP界面基本都是大同小異, 宮格布局現(xiàn)在基本成了每個APP必然的存在. 帶邊框, 常用在功能導航頁面 showImg(htt...

sarva 2019-08-30 15:44 評論0 收藏0
【CSS練習】IT修真院--練習1-九宮格

摘要：用于顯示日志信息及輸入一些命令請求監(jiān)聽?？色@得請求列表，點開某一項將看到數(shù)據(jù)頭部數(shù)據(jù)。包含本次請求的請求方法狀態(tài)碼請求服務器的地址其他一些設置響應頭部包含用戶代理，幫服務器識別設備用預覽。九宮格——用html+css制作一個網(wǎng)頁一. 目標效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述圓角...

Tecode 2019-08-29 15:34 評論0 收藏0
小程序—九宮格心形拼圖

摘要：而微信小程序中也剛好有進度條這個組件。推薦和意見反饋推薦給朋友意見反饋這個兩個功能就是用了，微信小程序的組件，這里需要注意的就是，在清除的默認樣式時，需要把的偽元素的邊框也去掉。總結這次做的這個九宮格心形拼圖的小程序，第一版已經上線了。說明前幾天在朋友圈看到好幾次這種圖片。 showImg(https://segmentfault.com/img/bVbeAoX?w=321&h=3...

myeveryheart 2019-08-23 10:33 評論0 收藏0
教你如何用Python處理圖片九宮格，炫酷朋友圈

摘要：成果展示先來看看成果，原圖為文章開始的圖片，一圖切九圖朋友圈九張圖發(fā)朋友圈的時候，還有個比較有意思的事，上傳時是亂序的，還需要你自己像玩拼圖一樣自己擺位置。這下又可以在朋友圈秀操作了比如改改背景呀，黑色背景什么的。 showImg(https://segmentfault.com/img/remote/1460000019609677); 01 前言在日常的生活中，大家偶爾會看到朋友...

zhunjiee 2019-07-31 10:38 評論0 收藏0
Flex實現(xiàn)九宮格

摘要：寫一個靠譜的布局關鍵點利用了和，當設置時，是包括盒子模型中的和的，但是為什么不設置呢因為父元素沒有高度，所以定義是沒有用的，且若想每個都為正方形，最好的方式就是設置，因為此時的百分比是父元素寬度的百分比，而也為父寫一個靠譜的flex布局 showImg(https://segmentfault.com/img/bVbe5KA?w=407&h=666); .block { ...

klinson 2019-08-29 16:22 評論0 收藏0