小黄书
<div class="codebox" data-prev="0"><style>
.box {
margin: 20px auto;
width: 600px;
height: 400px;
font-size: 18px;
background: conic-gradient(at 50% 100%, rgba(210,180,140,.5), rgba(210,180,140,.7) 180deg);
box-shadow: 2px 2px 6px gray;
column-count: 2;
column-gap: 40px;
column-fill: auto;
padding: 16px;
}
.box > p {
margin: 0;
text-indent: 2em;
}
</style>
<div class="box">
<p>雷军的职业生涯始于1992年加入金山软件，彼时他仅22岁。从开发经理到CEO，他带领金山推出“WPS Office”，在微软垄断的办公软件市场中杀出血路，并于2007年完成上市。这段经历让他深刻体会到“技术创新是企业的生命线”。</p>
<p>2010年，雷军以“让每个人享受科技乐趣”为初心创办小米。凭借高性价比手机迅速占领市场，2011年首款小米手机发布即引发抢购狂潮。此后，小米以“互联网+硬件+新零售”模式颠覆传统制造业，逐步构建起覆盖手机、智能家居、物联网的生态帝国。2018年，小米登陆港交所，成为最年轻的世界500强企业之一。</p>
<p>辉煌背后，雷军也曾经历至暗时刻。2022至2023年，受全球经济波动与行业竞争加剧影响，小米连续两年负增长，内外压力空前。雷军坦言：“那段时间，每天醒来都要面对现金流、供应链和团队信心的多重挑战。”</p>
</div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 可根据文本长短调整元素尺寸。
实现方法很多，这里使用圆锥渐变背景给元素造型，也可以使用其它方法。
column-* 属性用于多列，其中：
column-count : 多少列
column-gap : 列间距
column-fill : 文本填充方式
更多多列细节请自行查阅网上资料 用锥形渐变就弄出了书的形状，厉害了。at 50% 100%, 让颜色两边分开，而且还是相同颜色用不通的透明度而已，就弄得像两种颜色了。这些渐变内容真的学不完啊{:4_204:} 居然弄个这样的标题，笑，要是弄个绿底就是小绿书么{:4_173:} 红影 发表于 2025-8-16 11:15
居然弄个这样的标题，笑，要是弄个绿底就是小绿书么
这是为了区别于小红书{:4_170:} 红影 发表于 2025-8-16 11:14
用锥形渐变就弄出了书的形状，厉害了。at 50% 100%, 让颜色两边分开，而且还是相同颜色用不通的透明度而已 ...
不是学不完，理论上是能学完的。是用不尽。 代码在黑黑老师的手里什么都能做出来，真的是太厉害了！ 梦江南 发表于 2025-8-16 12:22
代码在黑黑老师的手里什么都能做出来，真的是太厉害了！
过奖过奖 这是整了个锥形渐变，at 50% 100%,从这里起点，180位置同黄色由0.5变为0.7，这思路真是绝了。
还给书页增添了阴影显得更有立体感。。 标题起得好，吸睛。
只是那个软件为啥叫小红书，一直是个谜。。
应该 叫小火书{:4_173:} 花飞飞 发表于 2025-8-16 13:00
标题起得好，吸睛。
只是那个软件为啥叫小红书，一直是个谜。。
应该 叫小火书
额，那个呀，有政治色彩，和一颗红心的红是同性质的 花飞飞 发表于 2025-8-16 12:58
这是整了个锥形渐变，at 50% 100%,从这里起点，180位置同黄色由0.5变为0.7，这思路真是绝了。
还给书页增 ...
简简单单的设计 漂亮，谢谢马老师经典探索{:4_190:} 马黑黑 发表于 2025-8-16 12:13
这是为了区别于小红书
原来如此，听到这话，更是笑{:4_173:} 马黑黑 发表于 2025-8-16 12:14
不是学不完，理论上是能学完的。是用不尽。
这样的运用太奇妙了，黑黑厉害{:4_199:} 红影 发表于 2025-8-16 18:14
这样的运用太奇妙了，黑黑厉害
{:4_203:} 红影 发表于 2025-8-16 18:13
原来如此，听到这话，更是笑
笑一笑十年少 杨帆 发表于 2025-8-16 17:38
漂亮，谢谢马老师经典探索
{:4_190:} 马黑黑 发表于 2025-8-16 13:28
额，那个呀，有政治色彩，和一颗红心的红是同性质的
这么解释就好了，红色活力四射，属于中国的颜色。。。正气十足
大爱红色{:4_205:} 马黑黑 发表于 2025-8-16 13:29
简简单单的设计
简洁不简单，看似简单，刚好体现构思的不简单。。