【花里胡哨】CSS制作伪单色边框悬停平滑转变为渐变色边框
上面这个是效果图，具体悬停效果可以在我的空间查看。
https://img.gamemale.com/album/202408/03/102116marv5mt5z05cy8vt.gif涉及到的相关代码如下，先贴出代码，然后我逐条解释：
#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平滑变换，就达到了目的。
星象占卜 渐变色边框看着也太酷炫了惹{:6_169:} 看着确实是感觉炫酷了 Well，很时尚的小...代码呢{:6_188:} 哇哦，确实看上去好酷炫，仰望大佬.jpg 星佬考虑一下用动画把渐变做成循环效果（ 悬停渐变，感觉加完这个效果瞬间高大上 渐变效果确实蛮好看的 不过我的空间基本处于废弃状态惹{:6_188:} 效果很酷炫，互赠的时候看到会觉得很惊喜吧，适合喜欢给自己空间搞得花里胡哨的坛友呢{:6_200:} 这个花样也是越来越多了 原来空间还能这么搞吗 豪堪{:4_99:}能做出来这种效果好厉害 空间彩色渐变边框特效哦蛮好看的 原来是空间一键赠送的装饰进阶版，效果不错哟 求星佬空间所有代码，我想复制粘贴 以后会不会酷炫到直接满足情绪价值于是不需要回礼 花里胡哨的的CSS效果看着很有趣惹 我大概是懒得没救了，看着很好看但是懒得调。。{:6_164:}{:6_164:}{:6_164:} 够花里胡哨，不过提供悬浮和点击的反馈也好像实用（？
要是可以做到二次确认就好，防止萌新被某些黑心空间好奇点击从而亏失金币（ 花里胡哨，但是很中看~可以让空间变得更加炫酷了嘿嘿~