渐变边框设计

Mnxj2025-04-15 18:19

如何实现一个边框颜色的渐变

首先border是没有这个属性的，

想到的方案是借助div包裹的方式

parent div 设计渐变背景

child div 设置padding

grandson div 内容

使用taliwind实现

外层 div:

jsx 复制代码

    // 自定义样式
   bg-gradient: linear-gradient(100.18deg, #5456C8 0%, #8CD5FF 100%)
  
   <div className="w-full bg-gradient">
   ```
   - `w-full`: 宽度设置为 100%。
   - `bg-gradient-border-right`: 这是一个自定义的 Tailwind CSS 类，用于创建右侧的渐变边框效果。这个类可能是在 Tailwind CSS 的配置文件中定义的。

中间层 div:
jsx 复制代码
```
<div className="flex w-full m-[1px]">
```
- flex: 使用 Flexbox 布局。
- w-full: 宽度设置为 100%。
- m-[1px]: 设置外边距为 1px，用于在内外层 div 之间创建一个细小的间隙，从而显示外层 div 的渐变边框。
内层 div:
jsx 复制代码
```
<div className="flex w-full flex-col justify-center">
```
- flex: 使用 Flexbox 布局。
- w-full: 宽度设置为 100%。
- flex-col: 将 Flexbox 方向设置为列。
- justify-center: 在垂直方向上居中对齐子元素。

通过这种嵌套结构，最外层的 div 提供了一个渐变边框，中间层的 div 设置了背景颜色并留出细小的间隙来显示外层的渐变边框，而内层的 div 则设置了背景颜色和透明度，并包含了实际的内容。

如果有圆角需求还可以给属性加上rounded-xl

markdown 复制代码

- `rounded-xl`: 设置圆角大小为 `xl`。