资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/使用css伪类before／after实现 正方形三宫格、正方形六宫格、正方形九宫格

使用css伪类before／after实现 正方形三宫格、正方形六宫格、正方形九宫格

CNZPH / 1781人阅读

摘要：结构图解析后记

</>复制代码 
  1. 结构图解析：

</>复制代码 
  1. 后记
</>复制代码 
  2.   
  3.     
  4.       12321
  5.     
  6.   
  8. .test-box{
  9.     display:flex;
  10.     flex-direction: row;
  11.     flex-wrap: wrap;
  12.     .test-item{
  13.       flex:0 0 33.33%;
  14.       position: relative;
  15.       &::before{
  16.         content: " ";
  17.         display:block;
  18.         padding-bottom:100%;
  19.       }
  20.       &:after{
  21.         content: " ";
  22.         transform-origin: center;
  23.         box-sizing: border-box;
  24.         position: absolute;
  25.         top:-50%;
  26.         left:-50%;
  27.         right:-50%;
  28.         bottom:-50%;
  29.         border-color: #c8c7cc;
  30.         border-style: solid;
  31.         border-width: 1px;
  32.         -webkit-transform: scale(.5);
  33.         -ms-transform: scale(.5);
  34.         transform: scale(.5);
  35.         border-top-width: 0;
  36.         border-left-width: 0;
  37.       }
  38.     }
  39.     .test-content{
  40.       position:absolute;
  41.       left:0;
  42.       top:0;
  43.       width:100%;
  44.       height:100%;
  45.       display: flex;
  46.       flex-direction: column;
  47.       justify-content: center;
  48.       align-items: center;
  49.     }
  50. }
GPU云服务器 云服务器 正方形 正方形图案 php圆角正方形 正方

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116196.html

相关文章

  • css如何实现n宫格布局?

    摘要：常见应用场景现在的界面基本都是大同小异宫格布局现在基本成了每个必然的存在带边框常用在功能导航页面无边框常用在首页分类设计目标在环境下通过实现宫格并且可以支持有无边框和每个格是否正方形有边框且每个格为正方形无边框最终效果百分比小技巧先解释一个 常见应用场景 现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在. 带边框, 常用在功能导航页面 showImg(htt...

    sarva 评论0 收藏0

  • 【CSS练习】IT修真院--练习1-九宫格

    摘要：用于显示日志信息及输入一些命令请求监听。可获得请求列表，点开某一项将看到数据头部数据。包含本次请求的请求方法状态码请求服务器的地址其他一些设置响应头部包含用户代理，帮服务器识别设备用预览。 九宫格——用html+css制作一个网页 一. 目标效果： showImg(https://segmentfault.com/img/bVbbxBA?w=872&h=644); 二. 效果描述 圆角...

    Tecode 评论0 收藏0

  • 小程序—九宫格心形拼图

    摘要：而微信小程序中也刚好有进度条这个组件。推荐和意见反馈推荐给朋友意见反馈这个两个功能就是用了，微信小程序的组件，这里需要注意的就是，在清除的默认样式时，需要把的伪元素的边框也去掉。总结这次做的这个九宫格心形拼图的小程序，第一版已经上线了。 说明 前几天在朋友圈看到好几次这种图片。 showImg(https://segmentfault.com/img/bVbeAoX?w=321&h=3...

    myeveryheart 评论0 收藏0

  • 教你如何用Python处理图片九宫格，炫酷朋友圈

    摘要：成果展示先来看看成果，原图为文章开始的图片，一图切九图朋友圈九张图发朋友圈的时候，还有个比较有意思的事，上传时是乱序的，还需要你自己像玩拼图一样自己摆位置。这下又可以在朋友圈秀操作了比如改改背景呀，黑色背景什么的。 showImg(https://segmentfault.com/img/remote/1460000019609677); 01 前言 在日常的生活中，大家偶尔会看到朋友...

    zhunjiee 评论0 收藏0

  • Flex实现九宫格

    摘要：写一个靠谱的布局关键点利用了和，当设置时，是包括盒子模型中的和的，但是为什么不设置呢因为父元素没有高度，所以定义是没有用的，且若想每个都为正方形，最好的方式就是设置，因为此时的百分比是父元素宽度的百分比，而也为父 写一个靠谱的flex布局 showImg(https://segmentfault.com/img/bVbe5KA?w=407&h=666); .block { ...

    klinson 评论0 收藏0

发表评论

登陆后可评论

0条评论

CNZPH

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<