CSS box-decoration-break プロパティの詳細

この記事では、box-decoration-break 属性について詳しく理解します。一定の参考値があるので、困っている友達が参考になれば幸いです。

過去 2 日間で、私は非常に興味深い CSS プロパティである box-decoration-break に遭遇しました。以下で一緒に調べてみましょう。

この属性に関する中国語のドキュメントは MDN にないため、合理的で適切な中国語の翻訳を考えてきました。直訳:

• box -- ボックス、要素ボックス モデルとして理解できます
• decoration -- 装飾、要素スタイルとして理解できます
• break --改行、参照 word-break、改行の表現として理解されます

次に、この属性は、改行が発生したときの要素のスタイルの表現としてまず理解できます。

MDN の英語の説明は次のとおりです。 box-decoration-break CSS プロパティは、要素のフラグメントが複数の行、列、またはページにまたがるときにどのようにレンダリングされるかを指定します。一般的な考え方は、box-decoration-break 属性は、改行/改行が発生したときに要素フラグメントをレンダリングする方法を指定するというものです。

オプションの値は 2 つだけです:

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

改行例

この属性は通常、インライン要素に作用します。次のような構造があり、それに境界線を追加するとします。

<span>ABCDEFGHIJKLMN</span>

span {
    border: 2px solid #999;
}

さて、その効果は次のとおりですが、目立ったものではありません。

わかりました。 continue 次のステップは Break です。上の行のテキストを分割しますが、スタイルは変更されません:

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

次の結果が得られます:

O , テキストが折り返されていることがわかります同時に、枠線もそれに応じて変化します。最初と最後の行には 3 辺の枠線があり、中央の 2 行には上下の枠線しかありません。 4 つの線を組み合わせると、図 1 が形成されます。これは通常の表示効果です。

次に、この記事の主人公を追加しますbox-decoration-break: clone：

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

これが有効になると、次の結果が得られます:

box-decoration-break: clone の使用法の概要

これを見ると、この属性が何であるかをすでに大まかに理解できます。

は、box-decoration-break: clone のインライン要素を使用します。改行表示がある場合、各行には、オリジナルの単一行。スタイル。

理解を深めるために例を見てみましょう。box-decoration-break: clone を前後に 2 つの効果を付けて使用する次のような構造があります:

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

CodePen デモ -- 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: 実際のクローンを作成しますapplication

信頼できる実用的なアプリケーション シナリオがあるかどうかを見てみましょう。 <p></p>

box-decoration-break: テキスト選択効果を実現するためにクローンを作成します。

このようなシナリオが考えられます。複数のテキストの特定のセクションを強調表示したいとします。行テキスト。この時点で、

を

でネストして、 で囲まれたテキストに特定の表示を実行できます。

たとえば、次のコピーがあります:

<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>

その中で、強調する必要があるコンテンツを

タグで囲みます。これを特定のスタイルにして 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;
}

次の効果が得られます:

box-decoration-break: clone が追加されていない場合はどうなりますか?改行があると、その効果は大幅に減少します。

#CodePen デモ -- text-decoration-break テキスト選択効果

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

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

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

怎么实现呢？也许可以每一行都是一个 <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%);
}

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

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

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

box-decoration-break 结合过渡动画

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

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

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

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

又或者是这样：

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 系列全军覆没，所以可以考虑应用在移动端。即便这个属性不兼容，降级展示对页面不会造成什么影响：

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

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

最后

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

• CSS/CSS3 box-decoration-break属性简介
• 初探box-decoration-break

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

更多编程相关知识，请访问：编程视频！！

以上がCSS box-decoration-break プロパティの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。