看，下面一个很有意思的 UI 效果： 主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。 剥离掉页面的内容元素，只剩下背景的话，大概是这样： 一开始是打算切图实...

在过往，想使用纯 CSS 实现纯粹的，内部透明渐变边框，是一件非常困难的事情，像是这样： 这个效果的几个核心难点： 边框带渐变色 边框支持设置 border-radius 内部支持透明 思考一下，使...

在这个小技巧中，我们将展示如何用 CSS 轻松地让背景渐变动起来。 在最近的一篇文章中，我们展示了 如何在文本上设置背景渐变。下面的 CodePen 演示展示了结果。 h1 {   color: transparent;   -webkit...

vuedraggable毫无疑问很好用,在搭建项目的时候,临时接到一个需求,画布中的元素需要进行缩放 然后问题就来了,在缩小到0.6左右的时候,vuedraggable的拖放失灵了 分析后发现是当画布 使用了zoom:0.6这样的样式...

.transparent{ background-color: #fff; background-image: linear-gradient( 45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc ), ...

一、动态rem适配方案：适合H5项目的适配方案 1. @media媒体查询适配 首先，我们需要设置一个根元素的基准值，这个基准值通常根据视口宽度进行计算。可以在项目的 CSS 文件中，通过媒体查询动态调整根元素的 f...

今天，分享一个实际业务中能够用得上的动画技巧。 巧用逐帧动画，配合补间动画实现一个无限循环的轮播效果，像是这样： 看到上述示意图，有同学不禁会发问，这不是个非常简单的位移动画么？ 我们来简单分...

在页面布局中，我们经常会遇到/使用这么一类常见的布局，也就是列表内容水平居中于容器中，像是这样： ul class="g-contaner">     li>li>     li>li> ul> ul {     width: 500px;...

在 CSS 中，我们可以很轻易的实现一个渐变，比如下面是一个从黄色到蓝色的渐变 background: linear-gradient(to right, yellow, blue) 效果如下 有没有发现有什么问题？🤔 没错，在黄色和蓝色的中间...

CSS3提供了一个border-image的属性,这个属性可以做一些不规则的多边形边框,类似九宫格的切图,非常强大. 但是有个问题,在chrome上面,9宫格会出现一像素的细线.下面直接转一篇文章.   border-image诡异...