css—实现边框模板

最新推荐文章于 2024-10-15 09:57:04 发布

xiaobai_qxjn

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量97

点赞数

文章标签： javascript 前端 css3 vue

本文链接：https://blog.csdn.net/xiaobai_qxjn/article/details/131051736

版权

该文章介绍了如何在Vue项目中通过CSS的线性重复渐变(repeating-linear-gradient)来创建一个独特的边框模板效果。内容包括设置背景颜色、调整元素尺寸和位置，以及在鼠标悬停时添加过渡效果。示例代码展示了具体实现步骤。

摘要由CSDN通过智能技术生成

css—实现边框模板

实现效果

在这里插入图片描述

使用 vue 来编写

1.html

<template>
  <div class="code">
    <div class="content-contain">
      <div>
        撒谎大红色的哈萨克计划的课件撒花很多萨达是的撒旦阿松大阿松大萨撒大苏打萨达是的撒旦是的撒达是啊打算打算打算打算打算的时间卡号
      </div>
    </div>
  </div>
</template>

2.css

思路：CSS线性重复渐变（repeating-linear-gradient）,在利用位置放大并偏移来实现旋转效果

@import '../styles/terminalAdapter.scss';
.code {
  @include flexCenter(center);
  margin-top: 30px;
  height: 400px;
  width: 100%;
  background: linear-gradient(to bottom, #000, gray, #fff);
  .content-contain {
    @include flexCenter(center);
    // padding: 0 60px;
    width: 300px;
    height: 200px;
    margin: 0 auto;
    transition: all 0.5s;
    background: repeating-linear-gradient(
        -45deg,
        #e8544d,
        #e8544d 10px,
        #fff 10px,
        #fff 10px,
        #75adf8 20px,
        #75adf8 30px,
        #fff 30px,
        #fff 40px
      ) -20px -20px/200% 200%;
    padding: 5px;
    div {
      padding: 10px;
      width: 300px;
      height: 100%;
      background-color: #fff;
    }
  }
  .content-contain:hover {
    box-shadow: 20px 19px 10px rgba(0, 0, 0, 0.5);
    background-position: 0 0;
  }
}