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

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

摘要：結(jié)構(gòu)圖解析后記

結(jié)構(gòu)圖解析：

后記


  
    
      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云服務(wù)器云服務(wù)器正方形正方形圖案 php圓角正方形正方

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116196.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

摘要：寫(xiě)一個(gè)靠譜的布局關(guān)鍵點(diǎn)利用了和，當(dāng)設(shè)置時(shí)，是包括盒子模型中的和的，但是為什么不設(shè)置呢因?yàn)楦冈貨](méi)有高度，所以定義是沒(méi)有用的，且若想每個(gè)都為正方形，最好的方式就是設(shè)置，因?yàn)榇藭r(shí)的百分比是父元素寬度的百分比，而也為父寫(xiě)一個(gè)靠譜的flex布局 showImg(https://segmentfault.com/img/bVbe5KA?w=407&h=666); .block { ...

klinson 2019-08-29 16:22 評(píng)論0 收藏0