前段时间@快叫我韩大人私信我考了我下面这个CSS题目：在不改变HTML结构，同时保留元素高度前提下，实现某一个布局效果……我觉得还挺有意思的，在征得其同意的前提下输出了这篇文章，大家若有兴趣，也可以进来看看，自己能不能实现相关需求。

可以看到这个函数js计算非常少，只有在创建和删除做了一些循环。而且用了createDocumentFragment尽可能的减少了dom操作，对性能提升也有很大帮助

布局和样式，是每个前端的必修课。在日常的工作中，也会碰到一些特定场景的布局需求，配合上样式，就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局，以及浏览各大网站时碰巧发现的神奇特效写法，在此做个分享。 由于篇幅原因，会分为 2 篇。今天，会先介绍一些有趣而又实用的布局的写…

你可能认为 CSS 只是一种简单地为网页设计样式的语言，但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏，你会惊讶地看到一个优秀的开发者可以用 CSS 做些什么。 这里有各种滤镜和特效，它们都是开源的，可以用在你自己的 web 项目中。 这些模块有的机遇 JavaS…

transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。学会transform的使用，才能更好创造出更好的页面效果。 translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 rotate()方法，在一…

先放置一个.box的div父容器，在box里放置一个.dice的div，然后在其里面放置6个div，分别表示骰子的6个面。 transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素，默认是其子元素不呈现3D效果，所以我们需要添加preserve-3d值，让其…

写这篇文章的起因是，当使用样式实现多行文本超出显示省略号的效果的时候，发现有的页面上省略号不是在文字末尾，而是在文字中间。后来查了下竟是跟文字在a链接里显示有关。下面详细说明下。 页面上文字超出部分用省略号表示，有多种方法可以实现，比如利用JS计算字数或是宽度，超出指定长度的字…

如果「一图胜千言」，那多图混合创造的效果要超过千言万语。同理，CSS 的混合模式为设计带来的可能性远远超出了你的想象。 你所听到的 CSS 混合模式，就是三个被现代浏览器所广泛支持的 CSS 属性。这三个属性包含了： 不过，本文主要聚焦在 background-blend-mo…

关于 CSS 阴影，之前已经有写过一篇，box-shadow 与 filter:drop-shadow 详解及奇技淫巧，介绍了一些关于 box-shadow 的用法。 最近一个新的项目，CSS-Inspiration，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖…