盒子阴影的两种实现方式和性能对比

Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但repaint消耗较多，而可选方案是使用伪元素，通过修改伪元素的透明度来实现同样的效果。

css3, box-shadow, 教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2125
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@charset "UTF-8";
/**
 * Here we’re simply changing the value of our rgba(). This is problematic, as
 * changes to `color` cause repaints (see https://csstriggers.com/color).
 */

.before {
    padding: 1em;
    background-color: #fff;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.before:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
/**
 * We can get around the repaint problem by--instead of updating a `color`
 * value--transitioning `opacity`. `opacity` is very cheap to update as it does
 * not incur any repaints if we update its value from a non-default value
 * (see https://csstriggers.com/opacity).
 *
 * Naturally, we can’t transition the `opacity` of the whole card, because that
 * would affect all child nodes. As such, we need to set up a empty pseudo
 * element and transition that instead.
 *
 * 1. Create the empty pseudo element and tuck it behind the card.
 * 2. Set up the `box-shadow` immediately…
 * 3. …but hide it.
 * 4. Promote the pseudo element onto its own compositor layer (accelerated
 *    rendering).
 * 5. Reveal the shadow on `:hover` by reinstating its `opacity`.
 */

.after {
    position: relative;
    /* [1] */
    
    padding: 1em;
    background-color: #fff;
}
.after:before {
    content: "";
    /* [1] */
    
    position: absolute;
    /* [1] */
    
    top: 0;
    /* [1] */
    
    right: 0;
    /* [1] */
    
    bottom: 0;
    /* [1] */
    
    left: 0;
    /* [1] */
    
    z-index: -1;
    /* [1] */
    
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    /* [2] */
    
    opacity: 0;
    /* [3] */
    
    will-change: opacity;
    /* [4] */
    
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.after:hover:before {
    opacity: 1;
    /* [5] */
}
/**
 * Nothing to see here…
 */

html {
    background-color: #f9f9f9;
    padding: 50px;
}
code {
    font-family: monospace, monospace;
}

HTML

Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但repaint消耗较多，而可选方案是使用伪元素，通过修改伪元素的透明度来实现同样的效果。

css3, box-shadow, 教程

编辑器支持Emmet

快捷键

Animate/transition box-shadow 可以使用box-shadow属性来实现盒子阴影效果，但repaint消耗较多，而可选方案是使用伪元素，通过修改伪元素的透明度来实现同样的效果。

css3, box-shadow, 教程

使用CSS3线性渐变和合成模式（blend-mode）实现的5种图像特效

使用CSS变量实现的17种混合模式聚光灯特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：