一、CSS写自适应大小的正方形代码：效果图：原理：元素的padding的百分比值四个值均根据当前元素的宽度来计算的padding只能取top或者bottom，自适应正方形其值要和宽一致，当然其他不同比

这篇文章特别介绍如何使用CSS来完成水波纹的效果。 虽然webkit具有遮罩的能力（webkit mask），不过webkit虽然强大，但在跨浏览器上总是它的罩门，况且在性能上也是往往会造成困扰（这也是为什么chrome要这么吃资源了），因此撇开webkit不谈，我们该用什么方…

不设置triangle宽高，设置border10像素的透明边框，然后设置top方向边框颜色和父元素一致就可完成这样的效果，同理，变换小尾巴箭头方向只需要在top，bottom，left，right方向上单独设置不同的边框颜色即可。 我们可以看到triangle继承了父元素too…

在这篇文章我会介绍 9 个使你的 CSS 更加简洁优雅的使用技巧。这些技巧小生经常使用，觉得挺高效实用，所以也就有了这篇文章。 正文现在开始。 1. 建议使用 padding 代替 margin 我们在设计稿还原的时候，padding 和 margin 两个是常用的属性，但我们…

本文的每一条，都是我曾经发过的掘金沸点，其中有很多条超过了百赞（窃喜）。 鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。 另外这里，老姚谢谢各位一如既往的支…

内部的Box会在垂直方向，从顶部开始一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加 box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。 BFC的区域不会与float box叠加。 B…

今年我面试了很多同学，只要看到简历上写“熟练掌握CSS3”的，我都会问问动画相关知识。然而我发现：都 2019 年了，还有很多同学不会 CSS 动画。 即，一个小球从向右匀速移动 200px，然后移动回来，再移动过去，最后停留在 200px 处。 就是需求这么简单的一个动画，然…

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题.原文：16种方法实现水平居中垂直居中 水平居中 1) 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 2) 若是块级元素, 该元素设置 ma…

看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法实现动效。另外一种实现思路是添加四个div来分别实现上下左右的边框效果，虽然可行，但是要添加四个额外元素，有点儿得不偿失的感觉。难道就没有更好的解决方案了... 就在我绞尽脑汁的时候，灵光…