有趣的 box-decoration-break
这两天接触到一个很有意思的 CSS 属性 -- 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;
}
嗯,效果如下,平平无奇:
好,接下来就是 break,我们把上面一行的文字断行,样式不变:
<span>ABCD <br/>EFG <br/> HI<br/> JKLMN</span>
得到如下结果:
O,可以看到,文字换行的同时,边框也随之变化,头尾两行都有 3 边边框,中间两行只有上下两边边框。如果将 4 行合起来,可以拼成图一,这个是正常的展示效果。
接下来,我们加上本文的主角 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
前后两种效果:
<span >每一行 <br/>样式 <br/> 都 <br/> 保持<br/> 完整独立</span>
CodePen Demo -- box-decoration-break
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>
嵌套 <span>
,对 <span>
包裹的文字进行一些特定的展示。
譬如我们有这样一段文案:
<p>
The <span>box-decoration-break</span> 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 <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>
标签包裹起来,赋予特定样式并且加上 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 Demo -- text-decoration-break 文本选中效果
box-decoration-break 每行文字带特定边框
又会有这样的场景,我们希望每一行文案都带有特定的边框样式,像这样:
怎么实现呢?也许可以每一行都是一个 <p>
,每一行 <p>
设定上述样式。但是如果文本内容不确定,容器的宽度也不确定呢?
这种场景,使用 box-decoration-break
也非常便捷。当然这里有个小技巧,正常而言, box-decoration-break: clone
只对 inline
元素生效,如果我们的文案像是这样包裹在 <p>
标签内:
<p>
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>
要使 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%);
}
无论文本内容或者容器宽度如何变化,都能完美适配:
CodePen Demo -- box-decoration-break 每行文字带特定边框
box-decoration-break 结合过渡动画
结合上面的内容,我们还可以考虑将 box-decoration-break
与过渡效果或者动画效果结合起来。
譬如,我们希望当我们 hover 文字内容的时候,一些重点需要展示的文字段落能够被强调展示,可能是这样:
CodePen Demo -- box-decoration-break 过渡动画
又或者是这样:
CodePen Demo -- box-decoration-break 结合过渡动画
你可以尝试点进 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 技术文章汇总在我的 Github -- iCSS ,持续更新,欢迎点个 star 订阅收藏。
好了,本文到此结束,希望对你有帮助 :)
如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。
有趣的 box-decoration-break的更多相关文章
- CSS开发过程中的20个快速提升技巧
摘要:本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你 ...
- 20个 CSS 快速提升技巧
作者:web秀 http://www.javanx.cn/20190321/css-skill/ 本文涵盖了20个css技巧,可以解决许多工作中常见的问题. 1.使用CSS重置(reset) css重 ...
- js--基础(对象、数组、函数、if语句、while语句、do while语句、continue语句、break语句)
三.流程控制:1.单行语句var age =20;//单行语句 2.复合语句花括号包含起来的与聚集和叫做复合语句,一对花括号表示一个复合语句 ,处理时可以当成一个单行语句来看待,一般复合句与叫做代码块 ...
- js流程控制语句
do...while语句 do...while语句是一种先运行,后判断的循环语句.也就是说,不管条件是否满足,至少先运行一次循环体. var box = 1; ...
- Opencv step by step - 鼠标事件
鼠标事件有下面几种(没有滚轮事件,比较遗憾): #define CV_EVENT_MOUSEMOVE 0 滑动 #define CV_EVENT_LBUTTONDOWN 1 左键点击 #define ...
- JavaScript基础---语言基础(3)
流程控制语句 学习要点: 1.switch语句 2.for...in语句 3.break和continue语句 4.with语句 ECMA-262规定了一组流程控制语句.语句定义了ECMAScript ...
- js实现图片向上播放(轮番滚动)
js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...
- js的语句
1.语句类型总结 var box = 100;//单行语句 { //用花括号包含的语句集合,叫做复合语句,单位一个 //一对花括号,表示一个复合语句,处理时,可以单做一条单行语句, //复合语句,我们 ...
- javascripct流程语句
1.条件选择 if 语句:只有当指定条件为true时,使用该语句来执行代码 if...else语句:当条件为true时执行代码,当条件为 false 时执行其他代码 if...else i ...
- javascript笔记5之流程控制语句
/* var box = 100; //单行语句 var age = 20; //另一条单行语句 { //用花括号包含的语句集合,叫做复合语句,单位一个 //一对花括号,表示一个复合语句,处理时候,可 ...
随机推荐
- Navicat PatchNavicat
Navicat for MySQL 11.0.10 32+64位(内含破解补丁)\64位 安装完成后,退出Navicat 执行PatchNavicat.exe,提示patch完成后,Navicat即可 ...
- 从JVM内存管理的角度谈谈JAVA类的静态方法和静态属性
在JVM中,内存分为两个部分,Stack(栈)和Heap(堆),这里,我们从JVM的内存管理原理的角度来认识Stack和Heap,并通过这些原理认清Java中静态方法和静态属性的问题. 一般,JVM的 ...
- elementui左侧菜单栏刷新后还是原来的状态
<template> <div id="leftMenuList"> <el-row> <el-col :span="24&qu ...
- margin-塌陷问题
塌陷问题 当两个盒子在垂直方向上设置margin值时,会出现一个有趣的塌陷现象. ①垂直并列(少见) 首先设置两个DIV,并为其制定宽高 /*HTML部分*/ <body> <div ...
- 巩固java(二)----JVM堆内存结构及垃圾回收机制
前言: 我们在运行程序时,有时会碰到内存溢出(OutOfMemoryError)的问题,为了解决这种问题,我们有必要了解JVM的内存结构和垃圾回收机制. 正文: 1.JVM堆内存结构 ...
- selenium webdriver (python)大全
webdriver的简介 硒2.0的主要新功能是集成的webdriver的API.webdriver的设计除了解决一些seleniumr-RC API的一些限制,与webdriver 的整合,将提供一 ...
- BZOJ_3132_上帝造题的七分钟_树状数组
BZOJ_3132_上帝造题的七分钟_树状数组 Description “第一分钟,X说,要有矩阵,于是便有了一个里面写满了0的n×m矩阵. 第二分钟,L说,要能修改,于是便有了将左上角为(a,b), ...
- 【爆料】-《卧龙岗大学毕业证书》UOW一模一样原件
☞西悉尼大学毕业证书[微/Q:865121257◆WeChat:CC6669834]UC毕业证书/联系人Alice[查看点击百度快照查看][留信网学历认证&博士&硕士&海归&a ...
- java happens-before原则规则
程序次序规则:一个线程内,按照代码顺序,书写在前面的操作先行发生于书写在后面的操作: 锁定规则:一个unLock操作先行发生于后面对同一个锁额lock操作: volatile变量规则:对一个变量的写操 ...
- 数据库分片(Database Sharding)详解
本文由云+社区发表 作者:腾讯云数据库 Introduction 导言 任何看到显著增长的应用程序或网站,最终都需要进行扩展,以适应流量的增加.以确保数据安全性和完整性的方式进行扩展,对于数据驱动的应 ...