<main class="wrapper">
<h1>她走在美丽的光彩中</h1>
<h2>——乔治·戈登·拜伦</h2>
<p>
她走在美的光彩中，像夜晚<br>
皎洁无云而且繁星漫天；<br>
明与暗的最美妙的色泽<br>
在她的仪容和秋波里呈现：<br>
耀目的白天只嫌光太强，它比那光亮柔和而幽暗。<br>
</p>
<p> 增加或减少一份明与暗<br>
就会损害这难言的美，<br>
美波动在她乌黑的发上，<br>
或者散布淡淡的光辉<br>
在那脸庞，恬静的思绪<br>
指明它的来处纯洁而珍贵<br>
</p>
<p> 在那脸颊上，在那眉宇间，<br>
如此温和，平静，而又脉脉含情，<br>
那迷人的微笑，那容颜的光彩，<br>
都在说明一个善良的生命：<br>
她的头脑安于世间的一切，<br>
她的心充溢着真纯的爱情！<br>
</p>
</main>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
/* 代码注释由百度文心一言提供 */
/* 创建半透明的背景图层 */
body::before {
content: '';
position: fixed;
inset: 0;
background-image: url("https://cloud-static.com/gallery/711718052693_.pic.jpg");
background-position: fixed;
background-size: cover;
z-index: -1;
opacity: .5;
/* 设置背景图片透明度 */
}
/* 主要内容容器样式 */
.wrapper {
width: 100%;
max-width: 450px;
padding: 2rem 2rem 2rem 3rem;
/* 创建磨砂玻璃效果 */
background: rgba(255 255 255 / .05);
backdrop-filter: blur(2px);
border-radius: 5px;
/* 创建双层边框效果 */
outline: 1px solid rgba(255 255 255 / .15);
outline-offset: 8px;
}
h1 {
margin: 0;
padding: 0;
text-transform: capitalize;
line-height: 1.6;
font-size: 1.3rem;
}
h2 {
margin: .5rem 0 5rem;
font-size: 1rem;
}
p {
position: relative;
color: rgb(214, 211, 209);
}
p+p {
margin-top: 1.5rem;
}
/* 首字下沉效果的实现 */
p:first-of-type::first-letter {
visibility: hidden;
/* 隐藏原始首字母 */
font-size: 0rem;
}
/* 自定义装饰首字母 */
p:first-of-type::before {
content: '她';
--clr-stroke: rgba(0 0 00 / .35);
/* 设置首字母的样式和效果 */
font-family: 'Aladin', handwriting;
float: left;
font-size: 10rem;
font-weight: bold;
font-style: italic;
/* outline: 1px dashed green;*/
line-height: .95;
/* 使用背景图片填充文字 */
background-image: url("https://images.pexels.com/photos/3775938/pexels-photo-3775938.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
background-size: cover;
background-position: top 0 left 0px;
color: transparent;
background-clip: text;
/* 定义文字周围的环绕区域 */
shape-outside: polygon(158px 3px, 140px 37px, 140px 62.55%, 130px 86.04%, 70px 86.63%);
margin-left: -2rem;
margin-top: -4rem;
padding-right: 1.5rem;
/* 添加文字描边效果 */
-webkit-text-stroke: 5px var(--clr-stroke);
text-stroke: 5px var(--clr-stroke);
}
* {
box-sizing: border-box;
}
body {
font-family: 'Almendra', serif;
font-size: 1rem;
line-height: 1.55;
background-color: #000;
color: white;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
}