stay hungry, stay foolish

主要功能是在按钮上。每当用户将鼠标移动到按钮上时，按钮会显示一个以鼠标位置为中心的渐变效果。

创建两层边框效果，悬停时它们会从上下两端逐渐收缩，覆盖在图片上，形成一个视觉上的悬停突出效果。将 .box 文字盒子定位在图片上方。父容器 .img-wrap 使用了。伪元素实现半透明黑色背景层，这些伪元素在正常状态下通过。确保子元素的绝对定位在父容器的边界内生效。// 伪元素实现两层边框效果半透明黑色背景层。// 图片和文字盒子上的所有元素都有过渡效果。图片和文字盒子上的所有过渡效果都设置了。，使得在悬停时的动画效果平滑。进行隐藏，并在悬停时使用。

@property是 CSS 中一个相对较新的功能，主要用于定义自定义属性（即 CSS 变量）的类型、继承性以及初始值。它允许开发者更好地控制和利用 CSS 自定义属性，尤其是在动画、过渡等动态场景中。

设置文本修饰线的类型，underline(在文本的下方)、overline(在文本的上方)、line-through(贯穿文本中间)： 设定的线的样式，solid(直线)、double(双下划线)、dotted(点画线)、dashed(虚线)、wavy(波浪线)使用 text-decoration时，设置文本装饰下划线。设置文本上的装饰性线条的样式。设置如何绘制超出基线的字符。：设置文本修饰线的颜色。：设置文本修饰线的厚度。

css设置渐变阴影，css的属性中没有直接设置渐变阴影的，但是可以通过伪元素去实现。

将图片、符号、表情自定义为列表项标记

实现效果：鼠标悬浮在这一行，让这行的文字和svg图片颜色发生变化。因为是用·img标签引入页面，使用fill属性是无效的。

一.float+margin左盒子: 左浮动 右盒子:右浮动中间盒子:左右加margin注意: 盒子的书写顺序是左右中 !! <div class="container"> <!-- 注意盒子的书写顺序 --> <div class="left w"></div> <div class="right w"></div> <d...