首頁 > web前端 > css教學 > 深入探究css box-decoration-break屬性

深入探究css box-decoration-break屬性

青灯夜游
發布: 2021-06-02 10:27:05
轉載
1955 人瀏覽過
<p>這篇文章帶大家一起深入了解box-decoration-break屬性。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。

<p>深入探究css box-decoration-break屬性

<p>這兩天接觸到一個很有趣的 CSS 屬性 -- box-decoration-break。下面就一起去一探究竟。

<p>因為 MDN 上關於這個屬性,沒有中文文檔,所以一直在想一個合理貼切的中文翻譯。直譯:

  • box -- 盒,可以理解為元素盒模型
  • decoration -- 裝飾,理解為元素樣式
  • break -- 斷​​行,參考word-break ,理解為斷行時候的表現
<p>那麼,這個屬性可以先理解為,元素在發生斷行時其樣式的表現形式。

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 屬性規定了一個元素片段在發生折行/斷行時,應該如何被渲染。
<p>可選取值只有兩個:

{
    box-decoration-break: slice;   // 默认取值
    box-decoration-break: clone;
}
登入後複製

換行範例

<p>#這個屬性通常作用於內聯元素。假設我們存在如下結構,並且給它添加一個邊框:

<span>ABCDEFGHIJKLMN</span>
登入後複製
span {
    border: 2px solid #999;
}
登入後複製
<p>嗯,效果如下,平平無奇:

<p>深入探究css box-decoration-break屬性

<p>好,接下來就是break,我們把上面一行的文字斷行,樣式不變:

<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>
登入後複製
<p>得到如下結果:

<p>深入探究css box-decoration-break屬性

<p>O,可以看到,文字換行的同時,邊框也隨之變化,頭尾兩行都有3 邊邊框,中間兩行只有上下兩邊邊框。如果將 4 行合起來,可以拼成圖一,這個是正常的展示效果。

<p>接下來,我們加上本文的主角box-decoration-break: clone

span {
    border: 2px solid #999;
+   box-decoration-break: clone;
}
登入後複製
<p>生效後,我們將會得到這樣的結果:

<p>深入探究css box-decoration-break屬性

box-decoration-break: clone 使用小結

<p>看到這裡,我們已經可以大概理解這個屬性的作用了:

<p>使用了box-decoration-break: clone 的內聯元素,如果存在折行顯示,那麼每一行都會擁有原本單行的所有完整樣式

<p>再看個例子加深下理解,存在如下結構,其使用了 box-decoration-break: clone  前後兩種效果:

<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>
登入後複製
<p>深入探究css box-decoration-break屬性

<p>#CodePen Demo -- box-decoration-break

<p>https://codepen.io/Chokcoco/pen/NJKoNq

#box-decoration-break: clone 生效樣式影響範圍

<p>當然,使用了box-decoration-break: clone 的元素並非對每一個樣式都會生效,只會作用於下列樣式:

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

#box-decoration-break: clone 實際應用

<p>

<p>

<p>接下來看看,有沒有什麼可靠的實際應用場景。

<p>box-decoration-break: clone 實作文字選取效果將會有這樣的場景,我們希望對一個多行文字中的特定一段文字進行著重展示。這時候,我們可以透過

<p><p> 嵌套

,對 <p>深入探究css box-decoration-break屬性 包裹的文字進行一些特定的展示。

<p>譬如我們有這樣一段文案:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false;">&lt;p&gt; The &lt;span&gt;box-decoration-break&lt;/span&gt; CSS property specifies how an element&amp;#39;s fragments should be rendered when broken across multiple lines, columns, or pages..Each box fragment is rendered independently with the &lt;span&gt;specified border, padding, and margin wrapping each fragment.&lt;/span&gt; The border-radius, border-image, and box-shadow are applied to each &lt;span&gt;fragment independently.&lt;/span&gt; &lt;/p&gt;</pre><div class="contentsignin">登入後複製</div></div>其中,我們將需要強調的內容透過

<p> 標籤包裹起來,賦予特定樣式並且加上深入探究css box-decoration-break屬性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;
}
登入後複製
<p>得到如下效果:

<p>

##########如果不加###box-decoration-break: clone### 呢?那如果有換行,效果會大打折扣:##################CodePen Demo -- text-decoration-break 文字選取效果######https:// codepen.io/Chokcoco/pen/rRaLqo###

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

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

<p>深入探究css box-decoration-break屬性

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

<p>这种场景,使用 box-decoration-break 也非常便捷。当然这里有个小技巧,正常而言, box-decoration-break: clone 只对 inline 元素生效,如果我们的文案像是这样包裹在 <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>
登入後複製
<p>要使 box-decoration-break: clone<p> 生效,可以通过设定 <p>display: inline 来实现。如此一来,要实现上述效果,我们只需要:

p {
    display: inline;
    box-decoration-break: clone;
    background:linear-gradient(110deg, deeppink 0%, deeppink 98%, transparent 98%, transparent 100%);
}
登入後複製
<p>无论文本内容或者容器宽度如何变化,都能完美适配:

<p>深入探究css box-decoration-break屬性

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

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

box-decoration-break 结合过渡动画

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

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

<p>深入探究css box-decoration-break屬性

<p>CodePen Demo -- box-decoration-break 过渡动画

<p>https://codepen.io/Chokcoco/pen/ZPGpmd

<p>又或者是这样:

<p>深入探究css box-decoration-break屬性

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

<p>https://codepen.io/Chokcoco/pen/ZPGpmd

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

兼容性

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

This is an experimental technology. Check the Browser compatibility table carefully before using this in production.
<p>看看 Can I Use,其实还好,除了 IE 系列全军覆没,所以可以考虑应用在移动端。即便这个属性不兼容,降级展示对页面不会造成什么影响:

<p>1深入探究css box-decoration-break屬性

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

{
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
登入後複製

最后

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

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

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

以上是深入探究css box-decoration-break屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板