思源笔记折腾记录 - 更多的自定义行内样式 - 常用样式定义

这篇文章的内容本身可以剪藏之后通过思源笔记折腾记录 - 运行你的笔记 - 链滴 (ld246.com)使用.

通过思源笔记折腾记录 - 快速开关代码片段 - 链滴 (ld246.com)进行管理

更多类似的内容在思源笔记折腾记录 - 稍微汇总一下 - leolee 的回帖 - 链滴 (ld246.com)可以看到

思源自带的行内字体样式呢，除了 13 种前景色和 13 种背景色之外，就只有这俩了：

​​

之前还有别的样式，但是导出的时候不大好导出，所以现在也就木大了。

所以为了笔记更加花里胡哨一点，我们来搞点别的样式。

首先还是引入依赖

为了能够在别的地方也能注册这些样式，我们需要一个注册表：

import { 注册表 } from "https://esm.sh/siyuan-noob/commonStruct";
let 自定义文字样式注册表 = new 注册表("自定义文字样式");
​

上面的注册表这个类会将所有传入同一个名字的注册表实例指向同一个注册表对象，所以就算你在另外一个文件再使用**new 注册表("自定义文字样式");**​​这种方式来取得一个新的注册表实例， 它们指向的注册项数组也是同一个，所以没有关系的啦。

因为是 hack 实现，所以只能用 backgroundColor 作为临时标记，然后再赋予实际的样式，就像这样

async function setStyle() {
  自定义文字样式注册表.list().forEach((样式规则) => {
    生成样式规则元素(样式规则);
  });
  document.querySelectorAll(`span[data-type][style]`).forEach((el) => {
    let backgroundColor = el.style.backgroundColor;
    if (
      backgroundColor &&
      backgroundColor.startsWith("var(--b3-custom-font-style-")
    ) {
      let id = backgroundColor
        .replace("var(--b3-custom-font-style-", "")
        .replace(")", "");

      let styleItem = 自定义文字样式注册表.items.find(
        (item) => Lute.EscapeHTMLStr(item.id.split(" ").join("_")) === id
      );
      if (styleItem) {
        el.setAttribute(
          "style",
          "--custom-style:" + id + ";" + Lute.EscapeHTMLStr(styleItem.style)
        );
      }
    } else if (el.getAttribute("style").startsWith("--custom-style:")) {
      let oldStyle = el.getAttribute("style");
      let id = oldStyle.split(";")[1].replace("--custom-style:", "");
      let styleItem = 自定义文字样式注册表.items.find(
        (item) => Lute.EscapeHTMLStr(item.id.split(" ").join("_")) === id
      );
      if (styleItem) {
       el.setAttribute(
          "style",
          "--custom-style:" + id + ";" + Lute.EscapeHTMLStr(styleItem.style)
        );
      }
    }
  });
  //处理字体面板的问题
  document.querySelectorAll("div.protyle-font").forEach((el) => {
    注入自定义字体样式(el);
  });
  setTimeout(setStyle, 200);
}
setTimeout(setStyle, 200); //我们来搞几个样式试试看async function setStyle() {

​

然后为了能够正确显示样式按钮，我们需要一些临时的 css 头

function 生成样式规则元素(样式规则) {
  let fixID = 样式规则.id.split(" ").join("_");

  let 元素id = "custom-style-" + Lute.EscapeHTMLStr(fixID);
  let 样式规则元素 = document.getElementById(元素id);
  if (!样式规则元素) {
    样式规则元素 = document.createElement("style");
    样式规则元素.setAttribute("id", 元素id);
    document.head.appendChild(样式规则元素);
  }
  let fontCss = "";
  fontCss += `
            span[style*="var(--b3-custom-font-style-${Lute.EscapeHTMLStr(
              fixID
            )})"],button[style*="var(--b3-custom-font-style-${Lute.EscapeHTMLStr(
    fixID
  )})"]{
                ${样式规则.style};
            }
            button[style*="var(--b3-custom-font-style-${Lute.EscapeHTMLStr(
              fixID
            )})"]{
              font-size:12px;
	      padding:0
            }
      
            `;
  if (样式规则.externel) {
    fontCss += 样式规则.externel;
  }
  if (fontCss !== 样式规则元素.textContent) {
    样式规则元素.textContent = fontCss;
  }
}
​

下面就是对自定义样式的注入了

上面那个过程种，有一个注入自定义字体样式的函数，它的实际内容是这样的：

let 临时样式容器;
let 旧注册表;
function 注入自定义字体样式(样式容器元素) {
  let target = Array.from(
    样式容器元素.querySelectorAll(
      `[style="background-color:var(--b3-font-background13)"]`
    )
  ).pop();
  if (临时样式容器 && !样式容器元素.querySelector(".custom-style")) {
    let _div = 临时样式容器.cloneNode(true);
    样式容器元素.insertBefore(_div, target.parentElement.nextElementSibling);
    let title = document.createElement("div");
    title.innerHTML = "自定义字体效果";
    样式容器元素.insertBefore(title, _div);
  } else if (!样式容器元素.querySelector(".custom-style")) {
    //复制原本的文字样式展示组件
    let div = document.createElement("div");
    //增加一个类名,让它跟原本区分开
    div.classList.add("custom-style");
    div.classList.add("fn__flex");
    let parentDiv = document.createElement("div");
    parentDiv.classList.add("fn__flex");
    parentDiv.classList.add("fn__flex-column");
    parentDiv.style.maxHeight = 20 * 3 + 4 * 2 + "px";
    parentDiv.style.overflowY = "scroll";

    //插入这个组件
    样式容器元素.insertBefore(
      parentDiv,
      target.parentElement.nextElementSibling
    );
    //插入一个标题
    let title = document.createElement("div");
    title.innerHTML = "自定义字体效果";
    let divider = document.createElement("div");
    divider.setAttribute("class", "fn__hr");
    样式容器元素.insertBefore(title, parentDiv);
    样式容器元素.insertBefore(divider, parentDiv);
    let styles = 自定义文字样式注册表.list();
    let button = 样式容器元素.querySelector('[data-type="style2"]');
    let lineWidth = 0;
    for (let index = 0, len = styles.length; index < len; index++) {
      let fixedID = styles[index].id.split(" ").join("_");
      let _button = button.cloneNode(true);
      _button.innerHTML = Lute.EscapeHTMLStr(styles[index].id);
      _button.setAttribute("style", "");
      div.appendChild(_button);
      _button.style.width = (_button.clientWidth || 60) + "px";
      let buttonWidth = _button.clientWidth;
      lineWidth = lineWidth + _button.clientWidth + 4;
      _button.remove();
      _button.style.backgroundColor = `var(--b3-custom-font-style-${fixedID})`;
      _button.setAttribute("class", "color__square");
      _button.setAttribute("data-type", "backgroundColor");
      _button.addEventListener('click',()=>{
        let button = 样式容器元素.querySelector('[data-type="backgroundColor"]');
        let backgroundColor =button.style.backgroundColor
        button.style.backgroundColor='red'
        button.click()
        button.style.backgroundColor=backgroundColor
      })
      if (lineWidth < 256 - buttonWidth - 4) {
        div.appendChild(_button);
        parentDiv.appendChild(div);
      } else {
        let _div = div.cloneNode(true);
        _div.innerHTML = "";
        parentDiv.insertBefore(_div, div.nextElementSibling);
        parentDiv.insertBefore(divider.cloneNode(true), _div);
        _div.appendChild(_button);
        lineWidth = _div.clientWidth > div.clientWidth ? 256 : 0;
        div = _div;
      }
    }
    if (旧注册表 !== JSON.parse(JSON.stringify(styles))) {
      临时样式容器 = parentDiv.cloneNode(true);
      旧注册表 = JSON.parse(JSON.stringify(styles));
    }
  }
}
​

我们来看搞几个样式试试

自定义文字样式注册表.注册({
  id: "测试",
  style: `  
  letter-spacing: 0.2rem;
  font-size: 1.5rem;
  background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  `,
});
自定义文字样式注册表.注册({
    id: "测试2",
    style: `  
    color: #cce7f8;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
    `,
    //这个的意思是会被注入到档头部的样式，如果没有这个代码片段，externel里面定义的样式就无效了， 所以最好就用来弄点动画啊什么的吧
    externel:`@-webkit-keyframes shining {
        from {
            text-shadow: 0 0 10px lightblue, 0 0 20px lightblue, 0 0 30px lightblue, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
        }
  
        to {
            text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
        }
    }`
  });
​

这俩样式看起来是这样的：

​​

如何在其他地方使用：

//import { 注册表 } from "https://esm.sh/siyuan-noob/commonStruct";
//上面这个依赖是必须的,只有这样才能取得内部注册表的引用
//let 自定义文字样式注册表 = new 注册表("自定义文字样式");
//new 注册表的传入参数就是注册表名称,只要传一样的参数,操作的都是同一个注册表
//自定义文字样式注册表.注册(
//	id:样式的id,
//	style:css样式字符串,注意是直接写元素需要的内联样式
//	external:css字符串,普通的css就可以,这里的样式规则一旦关闭这个代码片段就不生效了
//)
​

已知问题:应用样式之后需要编辑样式所在的块才能保证样式应用的永久持久化。

赠品：来自 rainbow-villa​的 174 个渐变样式哒。

//这里的样式全部来自https://www.npmjs.com/package/rainbow-villa https://github.com/deep5050/rainbow-villa
let 行内样式列表 = {
  "Warm Flame":
    "background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
  "Night Fade":
    "background-image: linear-gradient(0deg, #a18cd1 0%, #fbc2eb 100%);",
  "Spring Warmth":
    "background-image: linear-gradient(0deg, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);",
  "Juicy Peach":
    "background-image: linear-gradient(90deg, #ffecd2 0%, #fcb69f 100%);",
  "Young Passion":
    "background-image: linear-gradient(90deg, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);",
  "Lady Lips":
    "background-image: linear-gradient(0deg, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);",
  "Sunny Morning":
    "background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
  "Rainy Ashville":
    "background-image: linear-gradient(0deg, #fbc2eb 0%, #a6c1ee 100%);",
  "Frozen Dreams":
    "background-image: linear-gradient(0deg, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);",
  "Winter Neva":
    "background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
  "Dusty Grass":
    "background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);",
  "Tempting Azure":
    "background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
  "Heavy Rain":
    "background-image: linear-gradient(0deg, #cfd9df 0%, #e2ebf0 100%);",
  "Amy Crisp":
    "background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);",
  "Mean Fruit":
    "background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);",
  "Deep Blue":
    "background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
  "Ripe Malinka":
    "background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);",
  "Cloudy Knoxville":
    "background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);",
  "Malibu Beach":
    "background-image: linear-gradient(0deg, #4facfe 0%, #00f2fe 100%);",
  "New Life":
    "background-image: linear-gradient(0deg, #43e97b 0%, #38f9d7 100%);",
  "True Sunset":
    "background-image: linear-gradient(0deg, #fa709a 0%, #fee140 100%);",
  "Morpheus Den":
    "background-image: linear-gradient(0deg, #30cfd0 0%, #330867 100%);",
  "Rare Wind":
    "background-image: linear-gradient(0deg, #a8edea 0%, #fed6e3 100%);",
  "Near Moon":
    "background-image: linear-gradient(0deg, #5ee7df 0%, #b490ca 100%);",
  "Wild Apple":
    "background-image: linear-gradient(0deg, #d299c2 0%, #fef9d7 100%);",
  "Saint Petersburg":
    "background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);",
  "Arielles Smile":
    "background-image: linear-gradient(0deg, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);",
  "Plum Plate":
    "background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
  "Everlasting Sky":
    "background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);",
  "Happy Fisher":
    "background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);",
  'Blessing':
    "background-image: linear-gradient(0deg, #fddb92 0%, #d1fdff 100%);",
  "Sharpeye Eagle":
    "background-image: linear-gradient(0deg, #9890e3 0%, #b1f4cf 100%);",
  "Ladoga Bottom":
    "background-image: linear-gradient(0deg, #ebc0fd 0%, #d9ded8 100%);",
  "Lemon Gate":
    "background-image: linear-gradient(0deg, #96fbc4 0%, #f9f586 100%);",
  "Itmeo Branding":
    "background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);",
  "Zeus Miracle":
    "background-image: linear-gradient(0deg, #cd9cf2 0%, #f6f3ff 100%);",
  "Old Hat":
    "background-image: linear-gradient(0deg, #e4afcb 0%, #b8cbb8 0%, #b8cbb8 0%, #e2c58b 30%, #c2ce9c 64%, #7edbdc 100%);",
  "Star Wine":
    "background-image: linear-gradient(0deg, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);",
  "Blue Velvet":
    "background-image: linear-gradient(0deg, #6a11cb 0%, #2575fc 100%);",
  "Happy Acid":
    "background-image: linear-gradient(0deg, #37ecba 0%, #72afd3 100%);",
  "Awesome Pine":
    "background-image: linear-gradient(0deg, #ebbba7 0%, #cfc7f8 100%);",
  "New York":
    "background-image: linear-gradient(0deg, #fff1eb 0%, #ace0f9 100%);",
  "Shy Rainbow":
    "background-image: linear-gradient(0deg, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%);",
  "Mixed Hopes":
    "background-image: linear-gradient(0deg, #c471f5 0%, #fa71cd 100%);",
  "Fly High":
    "background-image: linear-gradient(0deg, #48c6ef 0%, #6f86d6 100%);",
  "Strong Bliss":
    "background-image: linear-gradient(0deg, #f78ca0 0%, #f9748f 19%, #fd868c 60%);",
  "Fresh Milk":
    "background-image: linear-gradient(0deg, #feada6 0%, #f5efef 100%);",
  "Snow Again":
    "background-image: linear-gradient(0deg, #e6e9f0 0%, #eef1f5 100%);",
  "February Ink":
    "background-image: linear-gradient(0deg, #accbee 0%, #e7f0fd 100%);",
  "Kind Steel":
    "background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);",
  "Soft Grass":
    "background-image: linear-gradient(0deg, #c1dfc4 0%, #deecdd 100%);",
  "Grown Early":
    "background-image: linear-gradient(0deg, #0ba360 0%, #3cba92 100%);",
  "Sharp Blues":
    "background-image: linear-gradient(0deg, #00c6fb 0%, #005bea 100%);",
  "Shady Water":
    "background-image: linear-gradient(0deg, #74ebd5 0%, #9face6 100%);",
  "Dirty Beauty":
    "background-image: linear-gradient(0deg, #6a85b6 0%, #bac8e0 100%);",
  "Great Whale":
    "background-image: linear-gradient(0deg, #a3bded 0%, #6991c7 100%);",
  "Teen Notebook":
    "background-image: linear-gradient(0deg, #9795f0 0%, #fbc8d4 100%);",
  "Polite Rumors":
    "background-image: linear-gradient(0deg, #a7a6cb 0%, #8989ba 52%, #8989ba 100%);",
  "Sweet Period":
    "background-image: linear-gradient(0deg, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);",
  "Wide Matrix":
    "background-image: linear-gradient(0deg, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);",
  "Soft Cherish":
    "background-image: linear-gradient(0deg, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%);",
  "Red Salvation":
    "background-image: linear-gradient(0deg, #f43b47 0%, #453a94 100%);",
  "Burning Spring":
    "background-image: linear-gradient(0deg, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 80%, #432c39 100%);",
  "Night Party":
    "background-image: linear-gradient(0deg, #0250c5 0%, #d43f8d 100%);",
  "Sky Glider":
    "background-image: linear-gradient(0deg, #88d3ce 0%, #6e45e2 100%);",
  "Heaven Peach":
    "background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);",
  "Purple Division":
    "background-image: linear-gradient(0deg, #7028e4 0%, #e5b2ca 100%);",
  "Aqua Splash":
    "background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);",
  "Above Clouds":
    "background-image: linear-gradient(0deg, #BDBBBE 0%, #9D9EA3 100%);",
  "Spiky Naga":
    "background-image: linear-gradient(0deg, #505285 0%, #585e92 12%, #65689f 25%);",
  "Love Kiss":
    "background-image: linear-gradient(0deg, #ff0844 0%, #ffb199 100%);",
  "Clean Mirror":
    "background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);",
  "Premium Dark":
    "background-image: linear-gradient(0deg, #434343 0%, #000000 100%);",
  "Cold Evening":
    "background-image: linear-gradient(0deg, #0c3483 0%, #a2b6df 100%, #6b8cce 100%);",
  "Cochiti Lake":
    "background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);",
  "Summer Games":
    "background-image: linear-gradient(0deg, #92fe9d 0%, #00c9ff 100%);",
  "Passionate Bed":
    "background-image: linear-gradient(0deg, #ff758c 0%, #ff7eb3 100%);",
  "Mountain Rock":
    "background-image: linear-gradient(0deg, #868f96 0%, #596164 100%);",
  "Desert Hump":
    "background-image: linear-gradient(0deg, #c79081 0%, #dfa579 100%);",
  "Jungle Day":
    "background-image: linear-gradient(45deg, #8baaaa 0%, #ae8b9c 100%);",
  "Phoenix Start":
    "background-image: linear-gradient(0deg, #f83600 0%, #f9d423 100%);",
  "October Silenceiver":
    "background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%);",
  "Faraway River":
    "background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%);",
  "Alchemist Lab":
    "background-image: linear-gradient(-20deg, #d558c8 0%, #24d292 100%);",
  "Over Sun":
    "background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);",
  "Premium White":
    "background-image: linear-gradient(0deg, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%);",
  "Mars Party":
    "background-image: linear-gradient(0deg, #5f72bd 0%, #9b23ea 100%);",
  "Eternal Constance":
    "background-image: linear-gradient(0deg, #09203f 0%, #537895 100%);",
  "Japan Blush":
    "background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);",
  "Smiling Rain":
    "background-image: linear-gradient(-20deg, #dcb0ed 0%, #99c99c 100%);",
  "Cloudy Apple":
    "background-image: linear-gradient(0deg, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);",
  "Big Mango":
    "background-image: linear-gradient(0deg, #c71d6f 0%, #d09693 100%);",
  "Healthy Water":
    "background-image: linear-gradient(60deg, #96deda 0%, #50c9c3 100%);",
  "Amour Amour":
    "background-image: linear-gradient(0deg, #f77062 0%, #fe5196 100%);",
  "Risky Concrete":
    "background-image: linear-gradient(0deg, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);",
  "Strong Stick":
    "background-image: linear-gradient(0deg, #a8caba 0%, #5d4157 100%);",
  "Vicious Stance":
    "background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);",
  "Palo Alto":
    "background-image: linear-gradient(-60deg, #16a085 0%, #f4d03f 100%);",
  "Happy Memories":
    "background-image: linear-gradient(-60deg, #ff5858 0%, #f09819 100%);",
  "Midnight Bloom":
    "background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);",
  Crystalline:
    "background-image: linear-gradient(-20deg, #00cdac 0%, #8ddad5 100%);",
  "Raccoon Back":
    "background-image: linear-gradient(-180deg, #BCC5CE 0%, #929EAD 98%);",
  "Party Bliss":
    "background-image: linear-gradient(0deg, #4481eb 0%, #04befe 100%);",
  "Confident Cloud":
    "background-image: linear-gradient(0deg, #dad4ec 0%, #dad4ec 1%, #f3e7e9 100%);",
  "Le Cocktail":
    "background-image: linear-gradient(45deg, #874da2 0%, #c43a30 100%);",
  "River City":
    "background-image: linear-gradient(0deg, #4481eb 0%, #04befe 100%);",
  "Frozen Berry":
    "background-image: linear-gradient(0deg, #e8198b 0%, #c7eafd 100%);",
  'Elegance':
    "background-image: linear-gradient(0deg, #EADFDF 59%, #ECE2DF 100%);",
  "Child Care":
    "background-image: linear-gradient(-20deg, #f794a4 0%, #fdd6bd 100%);",
  "Flying Lemon":
    "background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);",
  "New Retrowave":
    "background-image: linear-gradient(0deg, #3b41c5 0%, #a981bb 49%, #ffc8a9 100%);",
  "Hidden Jaguar":
    "background-image: linear-gradient(0deg, #0fd850 0%, #f9f047 100%);",
  "Above The Sky":
    "background-image: linear-gradient(0deg, #d3d3d3 0%, #d3d3d3 1%, #e0e0e0 26%);",
  'Nega': "background-image: linear-gradient(45deg, #ee9ca7 0%, #ffdde1 100%);",
  "Dense Water":
    "background-image: linear-gradient(0deg, #3ab5b0 0%, #3d99be 31%, #56317a 100%);",
  'Seashore':
    "background-image: linear-gradient(0deg, #209cff 0%, #68e0cf 100%);",
  "Marble Wall":
    "background-image: linear-gradient(0deg, #bdc2e8 0%, #bdc2e8 1%, #e6dee9 100%);",
  "Cheerful Caramel":
    "background-image: linear-gradient(0deg, #e6b980 0%, #eacda3 100%);",
  "Night Sky":
    "background-image: linear-gradient(0deg, #1e3c72 0%, #1e3c72 1%, #2a5298 100%);",
  "Magic Lake":
    "background-image: linear-gradient(0deg, #d5dee7 0%, #ffafbd 0%, #c9ffbf 100%);",
  "Young Grass":
    "background-image: linear-gradient(0deg, #9be15d 0%, #00e3ae 100%);",
  "Colorful Peach":
    "background-image: linear-gradient(0deg, #ed6ea0 0%, #ec8c69 100%);",
  "Gentle Care":
    "background-image: linear-gradient(0deg, #ffc3a0 0%, #ffafbd 100%);",
  "Plum Bath":
    "background-image: linear-gradient(0deg, #cc208e 0%, #6713d2 100%);",
  "Happy Unicorn":
    "background-image: linear-gradient(0deg, #b3ffab 0%, #12fff7 100%);",
  "Full Metal":
    "background-image: linear-gradient(0deg, #D5DEE7 0%, #E8EBF2 50%, #E2E7ED 100%);",
  "African Field":
    "background-image: linear-gradient(0deg, #65bd60 0%, #5ac1a8 25%, #3ec6ed 50%);",
  "Solid Stone":
    "background-image: linear-gradient(0deg, #243949 0%, #517fa4 100%);",
  "Orange Juice":
    "background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);",
  "Glass Water":
    "background-image: linear-gradient(0deg, #dfe9f3 0%, #ffffff 100%);",
  "North Miracle":
    "background-image: linear-gradient(0deg, #00dbde 0%, #fc00ff 100%);",
  "Fruit Blend":
    "background-image: linear-gradient(0deg, #f9d423 0%, #ff4e50 100%);",
  "Millennium Pine":
    "background-image: linear-gradient(0deg, #50cc7f 0%, #f5d100 100%);",
  "High Flight":
    "background-image: linear-gradient(0deg, #0acffe 0%, #495aff 100%);",
  "Mole Hall":
    "background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);",
  "Space Shift":
    "background-image: linear-gradient(60deg, #3d3393 0%, #2b76b9 37%, #2cacd1 65%, #35eb93 100%);",
  "Forest Inei":
    "background-image: linear-gradient(0deg, #df89b5 0%, #bfd9fe 100%);",
  "Royal Garden":
    "background-image: linear-gradient(0deg, #ed6ea0 0%, #ec8c69 100%);",
  "Rich Metal":
    "background-image: linear-gradient(0deg, #d7d2cc 0%, #304352 100%);",
  "Juicy Cake":
    "background-image: linear-gradient(0deg, #e14fad 0%, #f9d423 100%);",
  "Smart Indigo":
    "background-image: linear-gradient(0deg, #b224ef 0%, #7579ff 100%);",
  "Sand Strike":
    "background-image: linear-gradient(0deg, #c1c161 0%, #c1c161 0%, #d4d4b1 100%);",
  "Norse Beauty":
    "background-image: linear-gradient(0deg, #ec77ab 0%, #7873f5 100%);",
  "Aqua Guidance":
    "background-image: linear-gradient(0deg, #007adf 0%, #00ecbc 100%);",
  "Sun Veggie":
    "background-image: linear-gradient(-225deg, #20E2D7 0%, #F9FEA5 100%);",
  "Sea Lord":
    "background-image: linear-gradient(-225deg, #2CD8D5 0%, #C5C1FF 56%, #FFBAC3 100%);",
  "Black Sea":
    "background-image: linear-gradient(-225deg, #2CD8D5 0%, #6B8DD6 48%, #8E37D7 100%);",
  "Grass Shampoo":
    "background-image: linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%);",
  "Landing Aircraft":
    "background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);",
  "Witch Dance":
    "background-image: linear-gradient(-225deg, #A8BFFF 0%, #884D80 100%);",
  "Sleepless Night":
    "background-image: linear-gradient(-225deg, #5271C4 0%, #B19FFF 48%, #ECA1FE 100%);",
  "Angel Care":
    "background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);",
  "Crystal River":
    "background-image: linear-gradient(-225deg, #22E1FF 0%, #1D8FE1 48%, #625EB1 100%);",
  "Soft Lipstick":
    "background-image: linear-gradient(-225deg, #B6CEE8 0%, #F578DC 100%);",
  "Salt Mountain":
    "background-image: linear-gradient(-225deg, #FFFEFF 0%, #D7FFFE 100%);",
  "Perfect White":
    "background-image: linear-gradient(-225deg, #E3FDF5 0%, #FFE6FA 100%);",
  "Fresh Oasis":
    "background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);",
  "Strict November":
    "background-image: linear-gradient(-225deg, #CBBACC 0%, #2580B3 100%);",
  "Morning Salad":
    "background-image: linear-gradient(-225deg, #B7F8DB 0%, #50A7C2 100%);",
  "Deep Relief":
    "background-image: linear-gradient(-225deg, #7085B6 0%, #87A7D9 50%, #DEF3F8 100%);",
  "Sea Strike":
    "background-image: linear-gradient(-225deg, #77FFD2 0%, #6297DB 48%, #1EECFF 100%);",
  "Night Call":
    "background-image: linear-gradient(-225deg, #AC32E4 0%, #7918F2 48%, #4801FF 100%);",
  "Supreme Sky":
    "background-image: linear-gradient(-225deg, #D4FFEC 0%, #57F2CC 48%, #4596FB 100%);",
  "Light Blue":
    "background-image: linear-gradient(-225deg, #9EFBD3 0%, #57E9F2 48%, #45D4FB 100%);",
  "Mind Crawl":
    "background-image: linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%);",
  "Lily Meadow":
    "background-image: linear-gradient(-225deg, #65379B 0%, #886AEA 53%, #6457C6 100%);",
  "Sugar Lollipop":
    "background-image: linear-gradient(-225deg, #A445B2 0%, #D41872 52%, #FF0066 100%);",
  "Sweet Dessert":
    "background-image: linear-gradient(-225deg, #7742B2 0%, #F180FF 52%, #FD8BD9 100%);",
  "Magic Ray":
    "background-image: linear-gradient(-225deg, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);",
  "Teen Party":
    "background-image: linear-gradient(-225deg, #FF057C 0%, #8D0B93 50%, #321575 100%);",
  "Frozen Heat":
    "background-image: linear-gradient(-225deg, #FF057C 0%, #7C64D5 48%, #4CC3FF 100%);",
  "Gagarin View":
    "background-image: linear-gradient(-225deg, #69EACB 0%, #EACCF8 48%, #6654F1 100%);",
  "Fabled Sunset":
    "background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%);",
  "Perfect Blue":
    "background-image: linear-gradient(-225deg, #3D4E81 0%, #5753C9 48%, #6E7FF3 100%);",
};
Object.getOwnPropertyNames(行内样式列表).forEach((name) => {
  自定义文字样式注册表.注册({
    id: name,
    style: 行内样式列表[name],
  });
});

//测试一下
//

​

这些样式看起来就像这样(实际展示有处理,不会很长)

​​

​​

感谢:

deep5050/rainbow-villa: Handpicked collection of CSS gradinets (github.com)

这个库收集了一大堆 css 渐变样式。

如果这玩意对你有用可以去爱发电给我买杯咖啡

leolee9086 正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)

‍