iPhoneX前端适配

这几年手机更新的速度越来越快,手机屏幕也是各式各样,就拿iphoneX来说,这种怪异的刘海屏,如果把普通的浏览器网页照搬到iPhoneX上,有些地方显示会出现一些问题。

好在IOS为其自己怪异的屏幕[……]

阅读全文

css设置多行文本溢出显示省略号

控制文本显示行数用到了line-clamp这个属性,你可以戳这里查看line-clamp这个属性的兼容性。可以看到,这个属性在移动端上使用基本上是没有问题的,但是在pc端,就要考虑跨浏览器的问题了。[……]

阅读全文

粘连效果实现

举个例子,如果有两个水滴,当它们靠近的时候,会相互粘连在一起,最后形成一个水滴。那么,如果要实现一个这样的粘连效果,该如何做呢?

比如如下图片中的效果

此时,可以使用SVG中的filter来实[……]

阅读全文

sticky尝鲜

众所周知,css中的position代表的是定位的方式,它有relativeabsolutestaticfixed几个常见的属性。本文要说说它另外的一个属性sticky,所谓的粘性布局。

什么[……]

阅读全文

css选择器nth-child

其余的就不说了,说说两个我目前才了解的两个选择方式。

nth-child(-n+3) : 选择列表前三个项目。

nth-child(n+5) : 选择列表第五个(包括第五个)之后的所有项目。

示[……]

阅读全文

浏览器自定义滚动条样式

当一段文本过长,使用overflow:auto属性后,这段文本所在区域将会出现滚动条。有时候,我们需要自定义浏览器的滚动条样式,可以使用css3的scrollbar-thumb属性来实现。

首先看一[……]

阅读全文