巧妙实现重复渐变边框

巧妙实现重复渐变边框

html 结构

<div class="card">
  <div class="container">
    在 install 事件中，我们打开了一个名为 my-site-cache-v1
    的缓存，并将页面资源添加到缓存中。在 fetch
    事件中，我们首先检查缓存中是否存在请求的资源。如果存在，我们从缓存中获取资源，否则，我们从网络中获取资源。在
    activate 事件中，我们删除了所有旧的缓存，以确保只有最新的缓存被使用。
  div>
div>

css 样式
先布局card样式

• padding: 5px：设置卡片的内边距为 5 像素。
• width: 300px：设置卡片的宽度为 300 像素。
• margin: 0 auto：将卡片水平居中。
• background：使用 repeating-linear-gradient() 函数创建一个重复的线性渐变背景。这个渐变是一个 45 度角的线性渐变，从 #e8544d 开始，到 #75adf8 结束。在渐变过程中，我们交替使用了 #fff 和渐变开始和结束颜色之间的颜色来创建条纹效果。最后，我们使用 -100px 200% 将渐变向左上方移动了 100 像素，向下移动了 200% 的高度，以创建动态效果。
• transition: all 1s：为卡片的所有属性添加了一个 1 秒的过渡效果。

.card {
  padding: 5px;
  width: 300px;
  margin: 0 auto;
  background: repeating-linear-gradient(
      45deg,
      #e8544d,
      #e8544d 10px,
      #fff 10px,
      #fff 20px,
      #75adf8 20px,
      #75adf8 30px,
      #fff 30px,
      #fff 40px
    ) -100px 200%;
  transition: all 1s;
}

当鼠标经过时改变背景图位置

• background-position: 0 0：将背景渐变的位置设置为左上角，以创建动态效果。
• box-shadow: 0 3px 10px #ccc：添加一个 3 像素的阴影效果，以使卡片看起来更加立体。
• background-color: #fff：将卡片的背景颜色设置为白色，以覆盖原来的背景渐变。这样可以使卡片在鼠标悬停时更加明显。

.card:hover {
  background-position: 0 0;
  box-shadow: 0 3px 10px #ccc;
  background-color: #fff;
}

此时样式，在container下是透明的，只需要将container加上背景白色即可

• .container：一个包含卡片的容器。
• padding: 10px：设置容器的内边距为 10 像素。
• background-color: #fff：将容器的背景颜色设置为白色。

.container {
  padding: 10px;
  background-color: #fff;
}

整体的效果图