suchen
HeimWeb-FrontendCSS-TutorialEin tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

Dieser Artikel vermittelt Ihnen ein detailliertes Verständnis des Box-Decoration-Break-Attributs. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

In den letzten zwei Tagen bin ich mit einer sehr interessanten CSS-Eigenschaft in Kontakt gekommen – box-decoration-break. Finden wir es unten gemeinsam heraus. box-decoration-break。下面就一起去一探究竟。

因为 MDN 上关于这个属性,没有中文文档,所以一直在想一个合理贴切的中文翻译。直译一下:

  • box -- 盒,可以理解为元素盒模型
  • decoration -- 装饰,理解为元素样式
  • break -- 断行,参考word-break ,理解为断行时候的表现

那么,这个属性可以先理解为,元素在发生断行时其样式的表现形式。

MDN 上英文释意为:The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages。大意是 box-decoration-break 属性规定了一个元素片段在发生折行/断行时,应该如何被渲染。

可选取值只有两个:

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}

换行示例

这个属性通常作用于内联元素。假设我们存在如下结构,并且给它添加一个边框:

<span>ABCDEFGHIJKLMN</span>
span {
    border: 2px solid #999;
}

嗯,效果如下,平平无奇:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

好,接下来就是 break,我们把上面一行的文字断行,样式不变:

<span>ABCD <br>EFG <br> HI<br> JKLMN</span>

得到如下结果:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

O,可以看到,文字换行的同时,边框也随之变化,头尾两行都有 3 边边框,中间两行只有上下两边边框。如果将 4 行合起来,可以拼成图一,这个是正常的展示效果。

接下来,我们加上本文的主角 box-decoration-break: clone

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}

生效后,我们将会得到这样的结果:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

box-decoration-break: clone 使用小结

看到这里,我们已经可以大概理解这个属性的作用了:

使用了 box-decoration-break: clone 的内联元素,如果存在折行显示,那么每一行都将拥有原本单行的所有完整样式

再看个例子加深下理解,存在如下结构,其使用了  box-decoration-break: clone  前后两种效果:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

CodePen Demo -- box-decoration-break

https://codepen.io/Chokcoco/pen/NJKoNq

box-decoration-break: clone 生效样式影响范围

当然,使用了 box-decoration-break: clone 的元素并非对每一个样式都会生效,只会作用于下列样式:

  • background
  • border
  • border-image
  • box-shadow
  • clip-path
  • margin
  • padding
  • Syntax

box-decoration-break: clone 实际应用

接下来看看,有没有什么靠谱的实际应用场景。

box-decoration-break: clone 实现文本选中效果

会有这样的场景,我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候,我们可以通过 <p></p> 嵌套 <span></span> ,对 <span></span> 包裹的文字进行一些特定的展示。

譬如我们有这样一段文案:

<p>
The <span>box-decoration-break</span> CSS property specifies how an element&#39;s fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the <span>specified border, padding, and margin wrapping each fragment.</span> The border-radius, border-image, and box-shadow are applied to each <span>fragment independently.</span> 
</p>

其中,我们将需要强调的内容通过 <span></span> 标签包裹起来,赋予特定样式并且加上 box-decoration-break: clone,这样,无论强调文案是否换行,每一处的强调背景都是一致的:

p {
    font-size: 22px;
    line-height: 36px;
}

span {
    background-image: linear-gradient(135deg, deeppink, yellowgreen);
    color: #fff;
    padding: 2px 10px;
    border-radius: 50% 3em 50% 3em;
    box-decoration-break: clone;
}

得到如下效果:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

如果不加 box-decoration-break: clone

Weil MDN Es gibt kein chinesisches Dokument zu diesem Attribut, daher habe ich über eine vernünftige und angemessene chinesische Übersetzung nachgedacht. Wörtliche Übersetzung: <p></p>
  • box – Box, kann als Element des Boxmodells verstanden werden
  • decoration – Dekoration, wird als Elementstil verstanden
  • break – Zeilenumbruch , Referenz word-break, verstanden als die Leistung des Zeilenumbruchs
Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft Dann kann dieses Attribut zunächst als Ausdruck des Stils des Elements verstanden werden, wenn ein Zeilenumbruch auftritt.
Die englische Erklärung zu MDN lautet: Die CSS-Eigenschaft box-decoration-break gibt an, wie die Fragmente eines Elements gerendert werden sollen, wenn sie über mehrere Zeilen, Spalten oder Seiten verteilt werden. Die allgemeine Idee besteht darin, dass das Attribut box-decoration-break angibt, wie ein Elementfragment gerendert werden soll, wenn ein Zeilenumbruch/-umbruch auftritt.

Es gibt nur zwei mögliche Werte:

<p>
The box-decoration-break CSS property specifies how an element&#39;s fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

Beispiel für einen Zeilenumbruch

Dieses Attribut funktioniert normalerweise bei Inline-Elementen. Angenommen, wir haben die folgende Struktur und fügen einen Rahmen hinzu:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}
{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
🎜Nun, der Effekt ist wie folgt, unauffällig:
🎜🎜Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft🎜🎜Okay, der nächste Schritt ist Umbruch. Wir unterbrechen den Text in der obigen Zeile und der Stil bleibt unverändert : 🎜rrreee🎜 Die folgenden Ergebnisse werden erhalten: 🎜🎜Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft🎜🎜O, Sie können sehen, dass sich beim Umbrechen des Textes auch die Ränder ändern. Die ersten und letzten Zeilen haben dreiseitige Ränder und die mittleren beiden Zeilen haben nur obere und untere Ränder. Wenn Sie die 4 Linien zusammenfügen, können Sie Abbildung 1 bilden. Dies ist der normale Anzeigeeffekt. 🎜🎜Als nächstes fügen wir den Protagonisten dieses Artikels box-decoration-break: clone hinzu: 🎜rrreee🎜Nachdem es in Kraft tritt, erhalten wir dieses Ergebnis: 🎜🎜Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft🎜

box-decoration-break: Zusammenfassung der Klonverwendung

🎜Wenn wir das sehen, können wir die Rolle dieses Attributs bereits grob verstehen: 🎜🎜Verwendung von box -decoration-break: Inline-Element des Klons. Wenn eine Zeilenumbruchanzeige vorhanden ist, weist jede Zeile alle vollständigen Stile der ursprünglichen Einzelzeile auf. 🎜🎜Schauen wir uns ein weiteres Beispiel an, um unser Verständnis zu vertiefen. Es gibt die folgende Struktur, die box-decoration-break: clone mit zwei Effekten davor und danach verwendet: 🎜rrreee🎜🎜🎜 🎜CodePen-Demo – Box-Decoration-Break🎜🎜https://codepen.io/Chokcoco/pen/NJKoNq🎜

Box-Decoration-Break: Effektiver Stil klonen Einflussbereich

🎜Natürlich werden Elemente, die box-decoration-break: clone verwenden, nicht auf jeden Stil wirksam, sondern nur auf die folgenden Stile: 🎜
  • Hintergrund
  • Rahmen
  • Rahmenbild
  • Box-Schatten
  • Clip-Pfad
  • margin
  • padding
  • Syntax

box-decoration-break: praktische Anwendung klonen

🎜Lass uns Sehen Sie, ob es welche gibt. Was für ein zuverlässiges praktisches Anwendungsszenario. 🎜

box-decoration-break: Klonen, um Textauswahleffekt zu erzielen

🎜Es wird ein Szenario geben, in dem wir einen bestimmten Textabschnitt in einem mehrzeiligen Text hervorheben möchten. Zu diesem Zeitpunkt können wir <span></span> bis <p></p> verschachteln, um einige spezifische Operationen für den von <span></span>umschlossenen Text auszuführen > ausstellen. 🎜🎜Zum Beispiel haben wir diesen Text: 🎜rrreee🎜Darin verpacken wir den Inhalt, der hervorgehoben werden muss, mit dem <span></span>-Tag, geben ihm einen bestimmten Stil und fügen box-decoration-break : clone, auf diese Weise ist der Hervorhebungshintergrund jeder Stelle derselbe, unabhängig davon, ob die Hervorhebungskopie umbrochen ist oder nicht: 🎜rrreee🎜Der folgende Effekt wird erzielt:
🎜🎜Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft🎜 🎜Wenn Sie box-decoration-break: clone? Wenn es dann zu einem Zeilenumbruch kommt, wird der Effekt stark reduziert: 🎜🎜🎜🎜🎜🎜CodePen Demo – Text-Dekoration-Break-Textauswahleffekt🎜🎜https://codepen.io/Chokcoco/pen/rRaLqo🎜

box-decoration-break 每行文字带特定边框

又会有这样的场景,我们希望每一行文案都带有特定的边框样式,像这样:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

怎么实现呢?也许可以每一行都是一个 <p></p>,每一行 <p></p> 设定上述样式。但是如果文本内容不确定,容器的宽度也不确定呢

这种场景,使用 box-decoration-break 也非常便捷。当然这里有个小技巧,正常而言, box-decoration-break: clone 只对 inline 元素生效,如果我们的文案像是这样包裹在 <p></p> 标签内:

<p>
The box-decoration-break CSS property specifies how an element&#39;s fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the specified border, padding, and margin wrapping each fragment. The border-radius, border-image, and box-shadow are applied to each fragment independently. 
</p>

要使 box-decoration-break: clone<p></p> 生效,可以通过设定 <p></p>display: inline 来实现。如此一来,要实现上述效果,我们只需要:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}

无论文本内容或者容器宽度如何变化,都能完美适配:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

CodePen Demo -- box-decoration-break 每行文字带特定边框

https://codepen.io/Chokcoco/pen/gEbMGr?editors=1100

box-decoration-break 结合过渡动画

结合上面的内容,我们还可以考虑将 box-decoration-break 与过渡效果或者动画效果结合起来。

譬如,我们希望当我们 hover 文字内容的时候,一些重点需要展示的文字段落能够被强调展示,可能是这样:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

CodePen Demo -- box-decoration-break 过渡动画

https://codepen.io/Chokcoco/pen/ZPGpmd

又或者是这样:

Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

CodePen Demo -- box-decoration-break 结合过渡动画

https://codepen.io/Chokcoco/pen/ZPGpmd

你可以尝试点进 Demo ,然后去掉 box-decoration-break: clone ,会发现效果大打折扣。

兼容性

额,按照惯例兼容性应该都不太行。并且 MDN 也给出了这样的提示:

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.

看看 Can I Use,其实还好,除了 IE 系列全军覆没,所以可以考虑应用在移动端。即便这个属性不兼容,降级展示对页面不会造成什么影响:

1Ein tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft

另外,本文中,给出的代码都是 box-decoration-break: clone ,CodePen 自带了 autoprefixer 实际中可能需要写成:

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

最后

国内看到了大漠老师和张鑫旭大大都已经写过这个属性,大家可以对比着看看,加深理解:

好了,本文到此结束,希望对你有帮助 :)

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt vonEin tiefer Einblick in die CSS-Box-Decoration-Break-Eigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Dieser Artikel ist reproduziert unter:segmentfault. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),