在CSS中，倒影是一种比较常见的效果。今天，我们就将尝试，使用CSS完成各类不同的倒影效果，话不多说，直接进入主题。实现倒影的两种方式首先，快速过一下在CSS中，实现倒影的2种方式。使用-webkit-box-reflect正常而言，-webkit-box-reflect是一种非常便捷及快速的实现倒影的方式。-webkit-box-reflect的语法非常简单，最基本的用法像是这样：div{-webkit-box-reflect:below;}其中，below可以是below|above|left|right代表下上左右，也就是有4个方向可以选。看这么一个例子：div{background-i

在CSS中，倒影是一种比较常见的效果。今天，我们就将尝试，使用CSS完成各类不同的倒影效果，话不多说，直接进入主题。实现倒影的两种方式首先，快速过一下在CSS中，实现倒影的2种方式。使用-webkit-box-reflect正常而言，-webkit-box-reflect是一种非常便捷及快速的实现倒影的方式。-webkit-box-reflect的语法非常简单，最基本的用法像是这样：div{-webkit-box-reflect:below;}其中，below可以是below|above|left|right代表下上左右，也就是有4个方向可以选。看这么一个例子：div{background-i

最近，在看LPL比赛的时候，看到这样一个有意思的六芒星能力图动画：今天，我们就来使用纯CSS实现这样一个动画效果！实现背景网格对于如下这样一个背景网格，最好的方式当然肯定是切图，或者使用SVG路径。如果一定要使用CSS，勉强也能做，这就涉及了不规则图形边框效果，我们有一些方式可以实现，可以参考一下这几篇文章：现代CSS高阶技巧，不规则边框解决方案有意思！不规则边框的生成方案这里，我们可以使用drop-shadow()，大致实现一下这个效果，核心步骤：通过叠加实现一个六边形图形利用drop-shadow()实现边框效果用动图演示一下，大概是这样：代码如下：div{position:relativ

本文将介绍一个角向渐变的一个非常有意思的小技巧！我们尝试使用CSS绘制如下图形：在之前，类似的图案，其实我们有尝试过，在单标签实现复杂的棋盘布局一文中，我们用单标签实现了这样一个棋盘布局：那么，本文有什么特殊之处呢？让我们一探究竟。快速实现网格布局首先，上述的布局还是希望使用一个标签完成，这个没有问题。利用渐变是可以多层的这个特性，我们快速完成页面的网格形状，假设我们的结构如下：div{margin:auto;width:500px;height:500px;background:repeating-linear-gradient(90deg,#aec8ee0,#aec8ee1px,trans

最近，在看LPL比赛的时候，看到这样一个有意思的六芒星能力图动画：今天，我们就来使用纯CSS实现这样一个动画效果！实现背景网格对于如下这样一个背景网格，最好的方式当然肯定是切图，或者使用SVG路径。如果一定要使用CSS，勉强也能做，这就涉及了不规则图形边框效果，我们有一些方式可以实现，可以参考一下这几篇文章：现代CSS高阶技巧，不规则边框解决方案有意思！不规则边框的生成方案这里，我们可以使用drop-shadow()，大致实现一下这个效果，核心步骤：通过叠加实现一个六边形图形利用drop-shadow()实现边框效果用动图演示一下，大概是这样：代码如下：div{position:relativ

本文将介绍一个角向渐变的一个非常有意思的小技巧！我们尝试使用CSS绘制如下图形：在之前，类似的图案，其实我们有尝试过，在单标签实现复杂的棋盘布局一文中，我们用单标签实现了这样一个棋盘布局：那么，本文有什么特殊之处呢？让我们一探究竟。快速实现网格布局首先，上述的布局还是希望使用一个标签完成，这个没有问题。利用渐变是可以多层的这个特性，我们快速完成页面的网格形状，假设我们的结构如下：div{margin:auto;width:500px;height:500px;background:repeating-linear-gradient(90deg,#aec8ee0,#aec8ee1px,trans