项目中会出现的css样式

荔枝吖2025-05-14 8:47

1.重复渐变边框

思路：主要是用重复的背景渐变实现的

如图：

html 复制代码

 <div class="card">
      <div class="container">
        全面收集中医癌毒临床医案，建立医案共享机制，构建癌毒病机知识图谱，便于医疗人员检索、分析、学习和交流临床经验
        全面收集中医癌毒临床医案，建立医案共享机制，构建癌毒病机知识图谱，便于医疗人员检索、分析、学习和交流临床经验
        全面收集中医癌毒临床医案，建立医案共享机制，构建癌毒病机知识图谱，便于医疗人员检索、分析、学习和交流临床经验
      </div>
    </div>

css 复制代码

 .card {
        width: 300px;
        margin: 100px auto;
        padding: 10px;
        background: repeating-linear-gradient(
            -45deg,
            #f00,
            #f00 10px,
            #fff 10px,
            #fff 20px,
            #75adf8 20px,
            #75adf8 30px,
            #fff 30px,
            #fff 40px
          ) -20px -20px/200% 200%;
        transition: 0.5s;
      }
      .card:hover {
        background-position: 0 0;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
      }
      .container {
        padding: 10px;
        background: #fff;
      }

2. 锥型渐变(conic-gradient)

例如：我们想实现一个扇形效果如图：

css 复制代码

 .box {
        width: 200px;
        height: 200px;
        border: 2px solid #fff;
        border-radius: 50%;
        background: conic-gradient(red, red 90deg, green 90deg);
   }