4Ark

有一天逛 Codepen 的时候，看到这么一个效果：将文字上下切开两半。 点进去看了一下代码，发现原理很简单，大概就是通过伪类使用attr()函数获取内容，然后进行定位。 先让两个伪元素获取到属性的值，并且将位置调好。 这时候的效果是这样的，所以我们要把剩余部分的文字进行底部对…

在开发过程中，会有这么一个情况，需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式，常见的多如有矩形、圆形等。 其实实现这个效果，有多种方法，下面逐一介绍。 也就是说，给padding的值设定为百分比时，将根据父容器的宽度来计算。 没错，就这么简…