温和的色彩组合
浅蓝到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
淡紫到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(200, 170, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
浅绿到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(144, 238, 144, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
浅黄到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 255, 224, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
清新的色彩组合
淡蓝到白色
Css
深色版本
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, #ffffff 100%);
浅粉到白色
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 192, 203, 0.5) 0%, #ffffff 100%);
浅灰到白色
Css
深色版本
background: linear-gradient(to bottom, rgba(220, 220, 220, 0.5) 0%, #ffffff 100%);
自然的色彩组合
薄荷绿到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(173, 255, 47, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
天蓝到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
暖色调的色彩组合
橙色到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 165, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
桃红到透明
Css
深色版本
background: linear-gradient(to bottom, rgba(255, 127, 80, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
/* 设置标题背景透明 */
.protyle-title__input,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
background-color: transparent;
}
/* 移除标题的box-shadow和左右边框 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
box-shadow: none;
border-left: 0;
border-right: 0;
}
/* 设置H1和H2的顶部边框 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.item__readme h1,
.item__readme h2 {
border-top: 9px solid var(--v-block-heading-top-shadow);
margin: 1.3em 0 0.5em;
counter-reset: h2;
}
/* 设置标题的颜色、对齐方式、内边距、行高、背景渐变、字体间距 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
color: var(--v-block-heading-color);
text-align: left;
padding: 10px;
line-height: 1.5;
border-radius: var(--v-block-heading-border-radius);
letter-spacing: .15em;
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%); /* 从淡紫色到透明的渐变 */
font-weight: bold; /* 可选:加粗字体 */
}
/* 设置不同级别的标题字体大小 */
.protyle-wysiwyg .h1,
.item__readme h1 {
font-size: 2em; /* 最大的字体大小 */
}
.protyle-wysiwyg .h2,
.item__readme h2 {
font-size: 1.5em; /* 次大的字体大小 */
}
.protyle-wysiwyg .h3,
.item__readme h3 {
font-size: 1.2em; /* 较大的字体大小 */
}
.protyle-wysiwyg .h4,
.item__readme h4 {
font-size: 1em; /* 一般的字体大小 */
}
.protyle-wysiwyg .h5,
.item__readme h5 {
font-size: 0.875em; /* 较小的字体大小 */
}
.protyle-wysiwyg .h6,
.item__readme h6 {
font-size: 0.75em; /* 最小的字体大小 */
}
/* 设置连续标题的背景渐变 */
.protyle-wysiwyg .h1+.h2,
.protyle-wysiwyg .h2+.h3,
.protyle-wysiwyg .h3+.h4,
.protyle-wysiwyg .h4+.h5,
.protyle-wysiwyg .h5+.h6,
.item__readme h1+h2,
.item__readme h2+h3,
.item__readme h3+h4,
.item__readme h4+h5,
.item__readme h5+h6 {
background: linear-gradient(to bottom, rgba(135, 206, 235, 0.5) 0%, rgba(255, 255, 255, 0) 100%);/* 从淡紫色到透明的渐变 */
box-shadow: none;
border-top: 0;
margin-top: -9px; /* 微调顶部边距,使H1和H2与其他标题对齐 */
}
/* 设置H3-H6的顶部边框 */
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
border-top: 6px solid var(--v-block-heading-top-shadow);
margin: 1.3em 0 0.5em;
}
/* 设置H3-H6的顶部边框 */
.protyle-wysiwyg .h3+.h4,
.protyle-wysiwyg .h4+.h5,
.protyle-wysiwyg .h5+.h6,
.item__readme h3+h4,
.item__readme h4+h5,
.item__readme h5+h6 {
border-top: 0;
margin-top: -6px; /* 微调顶部边距,使H3-H6与其他标题对齐 */
}
/* 页面分割相关属性 */
.protyle-wysiwyg .h1,
.protyle-wysiwyg .h2,
.protyle-wysiwyg .h3,
.protyle-wysiwyg .h4,
.protyle-wysiwyg .h5,
.protyle-wysiwyg .h6,
.item__readme h1,
.item__readme h2,
.item__readme h3,
.item__readme h4,
.item__readme h5,
.item__readme h6 {
page-break-after: avoid;
break-after: avoid-page;
page-break-inside: avoid;
orphans: 4;
}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于