你知道当一个人的头像从一个圆圈或洞里伸出来时的那种效果吗？本文将使用一种很简洁的方式实现该悬停效果，只用了一个img元素和不到20行的CSS技巧实现一个炫酷的头像悬停效果

最近项目中看到这样的一个切角效果，如下所示 就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？ 一、自适应方式 这种布局一般有两种自适应方式，当然具体需要哪种可以

1. 画三角形 然后我们可以通过给任意三边的颜色设置为 transparent 即可分别实现任一方向的三角形。 通过设置某条边的宽度比其它边宽，来调整三角形的高度。 通过设置某条边的宽度比其它边窄，来调整三角形的宽度。 2. 画梯形 梯形也是基于 border 来绘制的，只不过…

Flex布局元素，称为Flex容器，简称"容器"。它的所有子元素自动成为容器元素，简称"项目"。 容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的排列方式：从左到右；交叉轴的排列方式：从上到下;

今天打开b站，看见一片灰色。对于公祭日，我们每一个人都应该为此默哀、纪念历史，都要铭记历史、热爱祖国、砥砺前行 首先，职业下意识就打开了控制台。为什么呢？是想看看怎么实现的，是css自定义属性吗？是引入一份css吗？是预处理器修改全局变量吗？结果，打开控制台，浏览了一下，最后定…

css盒子模型 又称为框模型（Box Model），包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如下图： 图中的内层是content依次是padding border margin。通常我们设置背景时就是内容…