登录 注册

来自 AI 的审美 标签样式 CSS

闲来无事，调了调标签的式样，调来调去都没啥新意。

于是让 AI 自己发挥，有几个还可以，下面给出参考——拿了例子再去找 AI 修正一下，就很理想了。

1 姑且称作蓝色大海

image.png

AI 就是这么爱花里胡哨。这是毫无要求的前提下，AI 自己生成的代码。

2 骚包神秘的深海蓝

当我认为第一个样式太刺眼时，AI 随即给出下图样式，实话实说，第二个更顺眼一点，但花哨本性丝毫不改

image.png

3 来自原野的透明绿

image.png

AI 还想给加入 emoji 的绿叶，不过最终样式里没有体现出来，AI 注意到了鼠标浮上去的动态变化。这是第三个，感觉一个比一个更符合我的审美（这个我提出的要求是，给出绿色森林的清新感）

4 这次是很有设计感的樱花

image.png

感动，经过我好几次调教，大概明白了我想要的意思，于是给出了如此华丽丽的粉色，话说左边那个玩意儿是啥？

5 奇怪的难以描述

image.png

左边两个红色的不知道是啥，还有动画。

我给出的是做出“海洋”主题，AI 似乎注意到了提示语“贝壳”，八过，这玩意儿和贝壳也好，和海洋也好，看不出任何关联。

（这个不放 CSS，难看）

6 怎么也弄不出来的海洋主题

image.png

自由发挥之下，只是在抄袭前面的樱花了。

这个也不放 css，难看

7 雪花主题开始接二连三的丑图

image.png

略微调教后是这个样子。第一张图忘记保存，和前面绿色原野差不多，左边有雪花 logo，但动画不太合理。

放弃，不想调教，只看 AI，不过这次给出的代码没有生效，不管了，下一个

8AI 给出的现代简洁审美风格

image.png

这是学校门口印刷店的审美么？

不放 css

9 华丽的海军蓝

image.png

这个还不错，表面还有一层动画，八过，怎么就和这个形状给较上劲了呢？怎么调都死不悔改

给出的主题词是“华丽”，有 css，太高调了，和 asri 不搭。

这种华丽丽，很有种美国人的那种 style（如果你看到这个蓝色表面一直有一层金色光辉闪过，你也会这么觉得）

image.png

修改后是这个，我喜欢。这个白金色不放 CSS，因为感觉不错，反而决定去精心修调一下。

10 这是少儿不宜的夜店风么？？

image.png

这颗心，鼠标放上去会放大哦！这颜色，这暧昧的动画，很日本风俗店。（全文最后再检查一遍，这个夜店风很魔性吸引着我，备份了一份，就在它和原野风反复横跳。这个边缘有点宽与占位置，后续还得调整）

AI 似乎也就只能发挥到这种地步，从最开始的不尽人意，到偶尔几款的一眼惊艳，再到后面不断的重复重复，看多了发现也就那样——也可能是因为我全程都没有过多调教，只是提出要求任期发挥。

其实我是想要往下图这个效果走的，但它没有新意，好，这次我决定动手调一下。

image.png

我插手后，变成乡村金属风了 😭

image.png

好了，这是最后自己手动调整的，算是比较奇葩的形状

image.png

不知不觉就玩了一两个小时。

文中的一些 CSS 用附件整理，导入思源就可以复制粘贴。

如果还有想要的效果，也可以借助我给的这份去让 AI 再改——其实自己去调教也可以，哈哈哈，期待看到新花样啊。

  • 我最后选用的是 3，绿色原野。这个我觉得很不错。

代码.sy.zip

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    28446 引用 • 119768 回帖
5 回帖
5
189 117 2 2 68

相关帖子

5 回帖
来自 AI 的审美 标签样式 CSS

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • Floria233 •
    付费者 作者

    闲来无事又重新调校，这次给出的不错。我感觉最近的 AI 好像更聪明了点。

    image.png

    /* ===== 思源笔记标签样式（柔和渐变版） ===== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    /     == 核心布局 == */
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.15em 0.6em !important;
    margin: 0 0.25em 0.3em 0 !important;
    border-radius: 12px !important;
    z-index: 5 !important;
    transition: all 0.3s ease-out !important;
    font-size: 0.92em !important;
    line-height: 1.3 !important;
    cursor: pointer !important;

    /* == 柔化红绿渐变（移除白色遮罩） == /
    background: linear-gradient(135deg,
    rgba(255, 158, 158, 0.25) 0%, /     降饱和粉红（原#ff007f） /
    rgba(152, 216, 195, 0.4) 100% /     若竹色嫩绿（原#00ff00） */
    ) !important;
    background-blend-mode: overlay;

    /* == 文本可读性强化 == /
    font-weight: 600 !important;
    color: #FFF9F0 !important; /     米白色替代纯白（增强柔和感） /
    text-shadow:
    0 1px 1px rgba(120, 50, 30, 0.3), /     底层深色阴影防融底 /
    0 0 2px rgba(255, 255, 240, 0.6) !important; /     上层柔光提升锐度 */

    /* == 柔光边框替代实体线 == /
    box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.6), /     柔光白边 /
    inset 0 0 6px rgba(255, 200, 200, 0.3), /     内发光弱化 /
    0 2px 4px rgba(150, 180, 170, 0.15) !important; /     外阴影淡雅化 */
    }

    /* ==== 悬停动效（保持柔和） ==== */
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover {
    transform: translateY(-1px) scale(1.05) !important;
    box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    inset 0 0 10px rgba(255, 180, 180, 0.4),
    0 3px 8px rgba(130, 170, 160, 0.2) !important;
    }

    /* ==== 移动端适配 ==== /
    @media (max-width: 768px) {
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    padding: 0.12em 0.5em !important;
    font-size: 0.88em !important;
    text-shadow:
    0 0.5px 1px rgba(120, 50, 30, 0.3),
    0 0 1px rgba(255, 255, 240, 0.6) !important; /     弱化阴影避免模糊 */
    }
    }

  • Floria233 •
    付费者 作者

    自己折腾的几种样式，就放在这里。大致样式调整好了，各个细节略有变化，可以复制去找 AI 再调自己喜欢的样式。

    第一种（最终版本）

    image.png

    /* ===== 思源标签样式优化（高亮蓝绿渐变文本） ===== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    /     == 核心覆盖层 == */
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: transparent !important;

    /* == 高亮蓝绿渐变文本（明度提升 + 自然过渡） == /
    background: linear-gradient(
    135deg,
    #00F2FF 0%, /     高亮青蓝色（明度 ↑30%） /
    #00FFB2 100% /     高亮蓝绿色（明度 ↑40%） */
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* == 布局优化（保持不变） == */
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.1em 0.3em !important;
    margin: 0 0.15em 0.2em 0 !important;
    border-radius: 8px !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    /* == 动效基础（保持不变） == */
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform: translateZ(0);
    }

    /* == 伪元素边框（保持原蓝绿渐变）== */
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #4DA6FF 0%, #2DDBB6 100%) !important;
    padding: 2px !important;
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    filter: none !important;
    }

    /* == 悬停动效（强化光感）== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover {
    transform: scale(1.05) translateZ(0) !important;
    /     文本添加发光效果增强明度 */
    filter: drop-shadow(0 0 2px rgba(0, 242, 255, 0.7)) !important;
    }

    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover::before {
    filter:
    saturate(1.8)
    brightness(1.25)
    drop-shadow(0 2px 4px rgba(77, 166, 255, 0.4)) !important;
    }

    /* ==== 移动端适配（保持不变）==== */
    @media (max-width: 768px) {
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    padding: 0.08em 0.25em !important;
    font-size: 0.75em !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
    }
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover {
    transform: none !important;
    }
    }

  • Floria233 •
    付费者 作者

    image.png

    乍一看和第一种没啥区别，其实文本颜色暗一点儿，其他区别不大。

    /* ===== 思源标签样式优化（100% 覆盖原生样式 + 动效） ===== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    /     == 核心覆盖层 == /
    background: none !important; /     强制清除原生背景色 /
    border: none !important;
    box-shadow: none !important;
    color: transparent !important; /     文本色透明处理 */

    /* == 渐变文本定制 == */
    background: linear-gradient(135deg, #4DA6FF 0%, #2DDBB6 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;

    /* == 布局优化 == */
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.1em 0.3em !important;
    margin: 0 0.15em 0.2em 0 !important;
    border-radius: 8px !important;
    font-size: 0.82em !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;

    /* == 动效基础 == /
    position: relative;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    transform: translateZ(0); /     启用 GPU 加速 */
    }

    /* == 伪元素边框（覆盖原生边框）== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #4DA6FF 0%, #2DDBB6 100%) !important;
    padding: 2px !important;
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    transition: inherit !important; /     同步主元素动画 */
    }

    /* == 悬停动效强化覆盖 == */
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover {
    transform: scale(1.05) translateZ(0) !important;
    }

    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover::before {
    filter:
    saturate(1.8)
    brightness(1.15)
    drop-shadow(0 2px 4px rgba(77, 166, 255, 0.3)) !important;
    }

    /* ==== 移动端适配 ==== */
    @media (max-width: 768px) {
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    padding: 0.08em 0.25em !important;
    font-size: 0.75em !important;
    border-radius: 6px !important;
    line-height: 1.3 !important;
    }

    /* 移动端禁用缩放避免触控冲突 */
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover {
    transform: none !important;
    }
    }

  • Floria233 •
    付费者 作者

    第三种，这种没有动画了，但文本内字体变成发光白色

    image.png

    /* ===== 思源标签样式修复（100% 清除原生边框） ===== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    /     == 核心尺寸优化（压缩 30%） == /
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.1em 0.3em !important;
    margin: 0 0.15em 0.2em 0 !important;
    /     关键修改：采用小米式精密圆角 /
    border-radius: 8px !important; /     原 15px→8px（减少 47%） */
    font-size: 0.82em !important;
    line-height: 1.15 !important;
    background: transparent !important;

    position: relative;
    transform: translateY(0.05em);

    /* == 渐变文本优化 == */
    font-weight: 500 !important;
    background: linear-gradient(135deg, #4DA6FF 0%, #2DDBB6 100%) !important;
    -webkit-background-clit: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow:
    0 1px 2px rgba(255, 255, 255, 0.85),
    0 0 3px rgba(25, 120, 150, 0.6) !important;
    }

    /* ==== 伪元素边框优化 ==== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    /     同步缩小圆角 /
    border-radius: 8px !important; /     原 15px→8px */
    background: linear-gradient(135deg, #4DA6FF 0%, #2DDBB6 100%) !important;
    padding: 2px !important;
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    filter: saturate(1.25);
    }

    /* ==== 移动端适配 ==== /
    @media (max-width: 768px) {
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    padding: 0.08em 0.25em !important;
    font-size: 0.75em !important;
    /     移动端圆角同步优化 /
    border-radius: 6px !important; /     原 12px→6px */
    }
    }

  • Floria233 •
    付费者 作者

    image.png

    第四种，这个椭圆，有动画，不过动画效果很肤浅。

    这个总体搭配很平庸。

    /* ===== 思源标签样式修复（100% 清除原生边框） ===== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    /     == 核心尺寸优化（压缩 30%） == /
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.1em 0.3em !important; /     减少内边距 /
    margin: 0 0.15em 0.2em 0 !important; /     缩小外边距 /
    border-radius: 15px !important; /     增加圆角弧度 /
    font-size: 0.82em !important; /     缩小字体 /
    line-height: 1.15 !important; /     优化垂直居中 */
    background: transparent !important;

    /* == 垂直居中修复 == /
    position: relative;
    transform: translateY(0.05em); /     微调文本垂直位置 */

    /* == 渐变文本优化 == */
    font-weight: 500 !important;
    background: linear-gradient(135deg, #5DADE2 0%, #48C9B0 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.7),
    0 0 2px rgba(30, 70, 80, 0.3) !important;
    }

    /* ==== 伪元素边框优化 ==== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1 !important;
    border-radius: 15px !important; /     同步增加圆角 /
    background: linear-gradient(135deg, #5DADE2 0%, #48C9B0 100%) !important;
    padding: 2px !important; /     减薄边框 */
    -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    }

    /* ==== 悬停动效优化 ==== /
    .protyle-wysiwyg [data-node-id] span[data-type~=tag]:hover {
    transform: translateY(-0.5px) !important; /     减少悬停位移 */
    }

    /* ==== 移动端适配 ==== /
    @media (max-width: 768px) {
    .protyle-wysiwyg [data-node-id] span[data-type~=tag] {
    padding: 0.08em 0.25em !important; /     移动端更紧凑 /
    font-size: 0.75em !important;
    border-radius: 12px !important; /     移动端圆角微调 */
    }
    }

Floria233
回帖
222
 帖子
55
 积分
460