移动端100vh的问题与解决方案

之所以100vh在移动端出现问题,原因大致如上图,真搞不懂,为什么总是有反人类的设计出现。

经过多方参考,实测有效的方案如下:

 

使用:
[crayon-675777183228e07747047[……]

Mac去除select圆角

H5背景音乐自动播放(兼容微信IOS,进程后台切换自动停止播放,本文例子为Vue写法)

文本行的斑马条纹

周知,表格的斑马条纹只需简单的运用伪类 :nth-child()/:nth-of-type()来处理就好了:

但是把这种效果运用在文本行的时候就有点力不从心了,尽管js可以实现这种功能,但是这在理论上有违纯粹原则(javascri[……]

自定义优雅的文本下划线

废话不多说:

效果:

原来你是这样的毛玻璃

以前写毛玻璃用的都是图层覆盖,看了 LEA VEROU 的《CSS揭秘》后才发现还有更优雅的毛玻璃:

效果图:

CSS3边框会动的信封

静态效果图:

解决css3毛玻璃效果(blur)有白边问题

效果如下:

可以发现边上是有白边的,这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。

效果图如下:

仔[……]