【花里胡哨】CSS制作伪单色边框悬停平滑转变为渐变色边框

星之子 · 发表于 2024-9-26 20:11:38

上面这个是效果图，具体悬停效果可以在我的空间查看。

涉及到的相关代码如下，先贴出代码，然后我逐条解释：

#block1 i img {
transition: all 0.3s; /*悬停平滑变化*/
border-radius: 4px; /*给图片添加圆角*/
filter: sepia(30%) saturate(30%) hue-rotate(5deg); /*做旧效果*/
box-shadow: inset 0 0 0 2px #f0f0f0; /*用单色内阴影伪装为白色边框*/
padding: 2px; /*添加内边距这个宽度便是内阴影透明后彩色背景露出部分伪装渐变色边框的宽度*/
background-image: linear-gradient(109.6deg, rgba(255,179,189,1) 1.8%, rgba(254,248,154,1) 50.6%, rgba(161,224,186,1) 100.3%); /*添加渐变色背景*/
}
#block1 i img:hover {
transform: scale(1.2); /*悬停从中心放大1.2倍数*/
text-decoration: none;
filter: sepia(0%) saturate(120%) hue-rotate(0); /*取消做旧效果提高饱和度*/
box-shadow: inset 0 0 0 2px transparent; /*将内阴影变为透明渐变色背景露出伪装边框这一过程可以平滑*/
}

复制代码

为什么没有使用border: 2px solid color？
CSS中的border是图片的边框，但图片的边框只能设置为单色，并无法满足我们要的“渐变色边框”的目标。
在CSS中，一张img的结构其实是background-image叠在下方，图片叠在其上，然后添加内阴影或外阴影。
但background-image本质上是一张图片，你可以把它设置为简单的单色，但也可以把它设置为渐变，甚至干脆更复杂的直接贴上一张图片——因此无法在悬停的时候通过transition设置为平滑变换。
所以思路就很明确了，这里我的做法是：让背景始终不变，而是设置内阴影作为“边框”，以此达到平滑变换成渐变彩色边框的目的。
· 将background-image设置为彩色渐变。
· 给图片添加2px的内边距，再添加2px、透明度为0的纯色内阴影box-shadow，以此来伪装成单色边框。
· 在悬停时，将内阴影变为透明；这一过程可以通过transition平滑变换，就达到了目的。

来自群组: 星象占卜