渐变边框设计

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

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

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

parent div 设计渐变背景

child div 设置padding

grandson div 内容

使用taliwind实现

  1. 外层 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 的配置文件中定义的。
  1. 中间层 div:

    jsx 复制代码
    <div className="flex w-full m-[1px]">
    • flex: 使用 Flexbox 布局。
    • w-full: 宽度设置为 100%。
    • m-[1px]: 设置外边距为 1px,用于在内外层 div 之间创建一个细小的间隙,从而显示外层 div 的渐变边框。
  2. 内层 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`。
相关推荐
SoonITer几秒前
esm 和 cjs 共用同一份类型 - 让 type 先 move to esm-only
前端·typescript·前端工程化
鸡米键盘2 分钟前
巧用 resolve.alias 优化构建产物:消除重复打包与提升 Tree Shaking 效果
前端
7ayl2 分钟前
原型链
前端
daydayupx9 分钟前
【前端学部署】第一篇: 几块钱部署一个有域名的静态网站
前端·后端
前端搬砖仔噜啦噜啦嘞10 分钟前
从0到1开发一款vscode插件
前端·javascript
汪子熙12 分钟前
计算机编程中的 Predicate 概念详解
前端
xianxin_12 分钟前
HTML 空格符
前端
baozj12 分钟前
🚀我靠!AI 帮我“摸鱼”摸成了腾讯开源组件库 TDesign 的贡献者!
前端·开源·github
Points23 分钟前
开源分享:一个轻量级管理iOS数据自动升级的管理类-SpeSqliteManager4IOS
前端
鹏程十八少25 分钟前
7. Android AI大模型 文本打字机效果 流畅光标追踪与智能滚动
前端