最新公告  | 
  • CTRL + D 加入收藏不迷路哦

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

CSS box-decoration-break属性的学习

最近在做项目时接触了一个CSS box-decoration-break属性,这个CSS属性不常见却很实用,所以下去查阅资料学习了一下。

box-decoration-break属性是CSS片段模块中的一个属性。

主要用来指定background、margin、padding、border、border-image、box-shadow、border-radius和clip-path在行内元素中如何使用。

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

box-decoration-break: slice|clone

实例

指定box-decoration-break属性:

span.ex1 { 
  -webkit-box-decoration-break: clone;
  -o-box-decoration-break: clone;
  box-decoration-break: clone;
}

span.ex2 { 
  -webkit-box-decoration-break: slice;
  -o-box-decoration-break: slice;
  box-decoration-break: slice;
}

属性值

slice 默认。 盒子装饰作为一个整体应用于元素,并在元素片段的边缘处断开
clone 框装饰适用于元素的每个片段,就好像片段是单个元素一样。 边框包裹元素每个片段的四个边缘,并为每个片段重新绘制背景

默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分。

简单小例子:

.mybj-box { width: 200px; color: #fff; }
.mybj-text { border-radius: 30px; background-color: #0055ff; }

<div class="mybj-box">
  <span class="mybj-text">码云笔记,记录web前端开发的个人技术博客</span>
</div>

效果如下:

box-decoration-break属性

由上图看出,换行的位置是直直切割,圆角在最开始和最后面。

看的有些丑,那么如何实现上面一行和下面一行两端都是圆角显示呢?

这个时候就要用到我们的box-decoration-break属性了.

改造后的css:

.mybj-box { width: 200px; color: #fff; }
.mybj-text { 
  border-radius: 30px; background-color: #cd0000;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

此时效果:

box-decoration-break属性

由上图可以看到断开的两个内联盒子两端都是圆角。

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

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

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

<section> 
   <h1>box-decoration-break</h1> 
   <p class="text"> HTML语言对其内容信息作以布局归属同时或之后, 
就需要通过CSS对其元素进行像素级的控制与<span>修饰</span>, 已达到最友好的视觉体验效果。
CSS3也是对其原CSS的一种升级与拓展, 更为充分的渲染<span>页面提升</span>页面性能。
 同时,这也是web前端开发者应具备了解且熟练应用的计算机语言。 </p> 
</section>

CSS代码:

section {
    width: 640px;
    padding: 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

section h1 {
    font-size: 16px;
    text-align: center;
}

section .text {
    font-size: 12px;
    color: #666;
    line-height: 1.6;
    column-gap: 20px;
    columns: 3;
}

section .text span {
    background: red;
    border-radius: 3px;
    color: white;
    padding: 0 5px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

效果展示:

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

如果对文本行内元素或文本按钮样式设置时,下面这几个属性会影响其渲染效果,在处理时注意添加box-decoration-break属性值为clone即可保持其样式的完整性。

background、border、border-image、box-shadow、clip-path、margin、padding

兼容性

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

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

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

兼容性

结语

box-decoration-break让我们处理元素多行效果会更完美些。如果元素不是inline元素时,需要先通过dipslay设置为inline。除此之外,此属性不应该和float或者position的值为absolute或者fixed结合在一起使用。最后希望你通过这篇文章对box-decoration-break有一个简单的了解。最后记得别忘了看文章中提供的示例,因为示例能让你看到其效果。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS box-decoration-break属性的学习

发表评论