文章目录
- 1. 案例
- 2. css属性：box-decoration-break
- 参考地址
1. 案例
现在有一篇文章，某些句子，是要被标记的，加一些css 让他突出一下
可以看到，在最后，断开了，那如若要让 断开哪里的样式 和 开始 和结束 保持一致，如何处理呢、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 50vw;
margin: auto;
}
span {
background-color: aquamarine;
border: 2px solid red;
/* box-decoration-break: clone;
-webkit-box-decoration-break: clone; */
}
</style>
</head>
<body>
<div>
Nestled in the heart of Beijing lies a masterpiece of Chinese architecture and history — the Forbidden City. This
imperial palace complex, also known as the Palace Museum, spans over 180 acres and captivates visitors with its
grandeur
and historical significance.
As one steps through the imposing Meridian Gate, a world of ancient splendor unfolds. The vast courtyards, intricate
pavilions, and ornate halls are a testament to the craftsmanship and cultural richness of imperial China. Each
building
is adorned with traditional Chinese motifs, from dragon carvings to vibrant ceramic tiles, reflecting the meticulous
attention to detail of the Ming and Qing dynasties.
<span>The Forbidden City is not only a marvel of architecture but also a sanctuary of natural beauty. Lush gardens,
meticulously landscaped over centuries, provide serene retreats amidst the bustling city. The Imperial Garden,
with
its
</span>
ancient cypresses and winding pathways, evokes a sense of tranquility and harmony.
Beyond its architectural and natural beauty, the Forbidden City holds a rich tapestry of history and cultural
heritage.
For over 500 years, it served as the political and ceremonial center of the Chinese empire, witnessing the rise and
fall
of dynasties. Today, it stands as a UNESCO World Heritage Site and a symbol of China's enduring legacy.
Visitors to the Forbidden City are transported back in time, exploring the opulent living quarters of emperors, the
ceremonial halls where imperial edicts were pronounced, and the sacred altars where rituals were performed. The Hall
of
Supreme Harmony, with its golden throne and intricate ceiling decorations, embodies the pinnacle of imperial power
and
architectural mastery.
As the sun sets over the Forbidden City, the vermilion walls and golden roofs glow in the soft evening light,
casting a
magical aura over the ancient complex. The blend of history, artistry, and natural beauty makes the Forbidden City
not
just a historical site but a living testament to China's rich cultural heritage.
In conclusion, the Forbidden City in Beijing stands as a timeless marvel, where the beauty of architecture, nature,
and
history converge. It remains a must-visit destination for travelers seeking to immerse themselves in the grandeur
and
legacy of ancient China.
</div>
</body>
</html>
2. css属性：box-decoration-break
语法
box-decoration-break: slice;
box-decoration-break: clone;
属性值
slice：元素被按照盒子被切割前的原始样式渲染；默认值clone：每个框片段与指定的边框、填充和边距独立呈现。
从这两幅图中就可以看出来区别了，
clone会是每个片段都是独立呈现
注意，在
webket内核的浏览器上，是要加一个前缀的，不然不生效
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
参考地址
- box-decoration-break MDN 文档
