css实现正方形

css实现正方形,第1张

如果仅仅是设置width 和 height的话,这个问题就不用说了,这里考虑的问题主要是padding的百分比是相对于谁来说的

元素的padding 和 margin百分比都是想对应父元素的width(父元素必须有width这个值 否则往上查找知道body)来说的, 如下通用的css正方形方案

设置一个伪元素,伪元素用的是利用 padding-bottom撑起父元素的高度,padding相对高度为 父元素的 width

首先说明一点:目前为止任何利用css来实现不规则边框的方法都是具有很严重的浏览器兼容性的(幸运的是微信小程序是支持的,哈哈),如果你想研究,请搜 css3 clip-path polygon

最兼容也是最简单的方法是直接用一张大图就解决了,最多就是切割一下,只要最终能够拼成一张大图即可。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11844164.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存