CSS box-장식-휴식 속성에 대해 자세히 알아보기

青灯夜游
풀어 주다: 2021-06-02 10:27:05
앞으로
1813명이 탐색했습니다.

이 글은 box-Decoration-Break 속성에 대한 심층적인 이해를 제공할 것입니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

CSS box-장식-휴식 속성에 대해 자세히 알아보기

지난 이틀 동안 저는 매우 흥미로운 CSS 속성인 box-꾸밈-break를 접했습니다. 아래에서 함께 알아보겠습니다. 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; }
로그인 후 복사

换行示例

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

ABCDEFGHIJKLMN
로그인 후 복사
span { border: 2px solid #999; }
로그인 후 복사

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

ABCD 
EFG
HI
JKLMN
로그인 후 복사

得到如下结果:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

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

span { border: 2px solid #999; + box-decoration-break: clone; }
로그인 후 복사

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

box-decoration-break: clone 使用小结

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

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

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

每一行 
样式

保持
完整独立
로그인 후 복사

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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 实现文本选中效果

会有这样的场景,我们希望对一个多行文本中的特定一段文本进行着重展示。这个时候,我们可以通过

嵌套 ,对 包裹的文字进行一些特定的展示。

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

The box-decoration-break CSS property specifies how an element'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.

로그인 후 복사

其中,我们将需要强调的内容通过 标签包裹起来,赋予特定样式并且加上 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; }
로그인 후 복사

得到如下效果:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

如果不加 box-decoration-break: clone

MDN이 속성에 대한 중국어 문서가 없어 합리적이고 적절한 중국어 번역을 고민해 왔습니다. 직역:

  • box -- 상자, 요소 상자 모델로 이해될 수 있음
  • 장식 -- 장식, 요소 스타일로 이해됨
  • break -- 줄바꿈 , 참조word-break는 줄 바꿈이 발생할 때의 성능으로 이해됩니다.
CSS box-장식-휴식 속성에 대해 자세히 알아보기그러면 이 속성은 먼저 줄 바꿈이 발생할 때 요소의 스타일 표현으로 이해될 수 있습니다. 발생합니다.

MDN에 대한 영어 설명은 다음과 같습니다. box-꾸밈-break CSS 속성은 여러 줄, 열 또는 페이지에 걸쳐 분할될 때 요소의 조각을 렌더링하는 방법을 지정합니다. 일반적인 아이디어는 box-dress-break 속성이 줄 바꿈/바꿈이 발생할 때 요소 조각을 렌더링하는 방법을 지정한다는 것입니다.

가능한 값은 두 가지뿐입니다:

The box-decoration-break CSS property specifies how an element'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 { 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; }
로그인 후 복사
로그인 후 복사
글쎄, 효과는 다음과 같습니다. 눈에 띄지 않습니다:
CSS box-장식-휴식 속성에 대해 자세히 알아보기자, 다음 단계는 중단입니다. 위 줄의 텍스트를 나누고 스타일은 변경되지 않습니다. : rrreee 다음과 같은 결과를 얻었습니다:CSS box-장식-휴식 속성에 대해 자세히 알아보기O, 텍스트가 줄바꿈되면 테두리도 변경되는 것을 볼 수 있습니다. 첫 번째와 마지막 줄에는 3면 테두리가 있고 가운데 두 줄에는 위쪽 및 아래쪽 테두리만 있습니다. 4개의 선을 하나로 합치면 그림 1과 같은 모양이 됩니다. 이것이 정상적인 표시 효과입니다. 다음으로 이 기사의 주인공box-꾸밈-break: clone을 추가합니다: rrreee적용된 후 다음 결과를 얻게 됩니다:CSS box-장식-휴식 속성에 대해 자세히 알아보기

box-꾸밈-break: 복제 사용 요약

이를 보면 이미 이 속성의 역할을 대략적으로 이해할 수 있습니다.box 사용 - decoration-break: 클론의 인라인 요소, 줄 바꿈 표시가 있는 경우 각 줄은 원래 단일 줄의 전체 스타일을 모두 갖습니다. 이해를 돕기 위해 또 다른 예를 살펴보겠습니다. 전후에 두 가지 효과가 있는box-꾸밈-break: clone을 사용하는 다음 구조가 있습니다. rrreee< img src="https://img.php.cn/upload/image/250/137/364/162260012424816CSS box-장식-휴식 속성에 대해 자세히 알아보기" title="162260012424816CSS box-장식-휴식 속성에 대해 자세히 알아보기" alt="CSS box-장식-휴식 속성에 대해 자세히 알아보기"/>< /span> CodePen 데모 -- box-장식-breakhttps://codepen.io/Chokcoco/pen/NJKoNq

box-장식-break: 효과적인 스타일 복제 영향 범위

물론,box-꾸밈-break: clone을 사용하는 요소는 모든 스타일에 적용되지 않고 다음 스타일에서만 작동합니다:
  • 배경< /li>
  • 테두리
  • 테두리 이미지
  • 상자 그림자
  • 클립 경로
  • margin
  • < li>padding
  • 구문

box-꾸밈-break: 실제 응용 프로그램 복제

Let's 정말 신뢰할 수 있는 실제 적용 시나리오가 있는지 확인하세요.

box-꾸밈-break: 복제하여 텍스트 선택 효과 얻기

여러 줄로 구성된 텍스트에서 특정 텍스트 섹션을 강조 표시하려는 시나리오가 있습니다. 이때

에 중첩하여전시. 예를 들어 다음 카피가 있습니다: rrreee여기서태그를 통해 강조해야 할 내용을 래핑하고 특정 스타일을 지정하고 < code>box-꾸밈-break : clone, 이런 식으로 강조 사본이 줄바꿈되었는지 여부에 관계없이 각 위치의 강조 배경은 동일합니다. rrreee다음과 같은 효과를 얻습니다.
CSS box-장식-휴식 속성에 대해 자세히 알아보기box-꾸밈-break:clone <을 추가하지 않으면 code> 는 어떻게 되나요? 그런 다음 줄바꿈이 있으면 효과가 크게 줄어듭니다. CodePen Demo -- text-designation-break 텍스트 선택 효과https://codepen.io/Chokcoco/pen/rRaLqo

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

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

怎么实现呢?也许可以每一行都是一个

,每一行

设定上述样式。 但是如果文本内容不确定,容器的宽度也不确定呢

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

标签内:

The box-decoration-break CSS property specifies how an element'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.

로그인 후 복사
로그인 후 복사

要使 box-decoration-break: clone

生效,可以通过设定

display: inline来实现。如此一来,要实现上述效果,我们只需要:

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

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

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

box-decoration-break 结合过渡动画

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

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

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

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

又或者是这样:

CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

1CSS box-장식-휴식 속성에 대해 자세히 알아보기

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

{ box-decoration-break: clone; -webkit-box-decoration-break: clone; }
로그인 후 복사
로그인 후 복사

最后

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

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

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

위 내용은 CSS box-장식-휴식 속성에 대해 자세히 알아보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
css
원천:segmentfault.com
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!