box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。
默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分。举个例子
<div class="box"> <span class="text">生命的道路上永远没有捷径可言,只有脚踏实地走下去。</span> </div>
.box { width: 200px; color: #fff; }
 .text { border-radius: 30px; line-height: 30px; }
结果如下:

可以看到换行的位置是直直切割,圆角在最开始和最后面。显然每一行都是圆角才更好看。就要借助 box-decoration-break属性。
CSS改动如下:

.box { width: 200px; color: #fff; }
 .text { border-radius: 30px;
            line-height: 30px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
结果如下:

可以看到断开的两端都是圆角:
 
在CSS布局中,总会存在元素box盒子断开的情况(page/column/region/line),box-decoration-break可以决定断开时候的渲染表现。
当然,只能影响一下部分CSS的渲染,
background
border
border-image
box-shadow
border-radius
clip-path
margin
padding等
box-decoration-break语法如下:
box-decoration-break: slice; /* 默认值 */   
box-decoration-break: clone;断开的各个盒子样式独自渲染。
 
借助box-decoration-break属性,我们可以实现整体渐变效果。

.text { background-image: linear-gradient(to right, blue, red 200px); 
          -webkit-box-decoration-break: clone; box-decoration-break: clone; }
结果如下:

而默认状态所有行累加为一个渐变;

在移动端页面,包括小程序中可以放心使用。Android,Chrome等浏览器下还需要-webkit-私有前缀,Firefox浏览器完全支持。

box-decoration-break属性的更多相关文章

  1. 在CSS中,BOX的Padding属性的数值赋予顺序为

    4种可能的情况,举例说明: padding:10px; // 四个内边距都是10px padding:5px 10px; // 上下5px 左右10px padding:5px 10px 15px; ...

  2. CSS开发过程中的20个快速提升技巧

    摘要:本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手. 1.使用CSS重置(reset) css重置库如normalize.css已经被使用很多年了,它们可以为你 ...

  3. 20个 CSS 快速提升技巧

    作者:web秀 http://www.javanx.cn/20190321/css-skill/ 本文涵盖了20个css技巧,可以解决许多工作中常见的问题. 1.使用CSS重置(reset) css重 ...

  4. js--基础(对象、数组、函数、if语句、while语句、do while语句、continue语句、break语句)

    三.流程控制:1.单行语句var age =20;//单行语句 2.复合语句花括号包含起来的与聚集和叫做复合语句,一对花括号表示一个复合语句 ,处理时可以当成一个单行语句来看待,一般复合句与叫做代码块 ...

  5. 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别

    高效开发之SASS篇   作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...

  6. CSS 的overflowhidden 属性详细解释

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解.      一提到清除浮动,我们就会想到另外一个 ...

  7. CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins

    前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日 ...

  8. 边框(border)边距(margin)和间隙(padding)属性的区别

    边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...

  9. Function对象属性和方法

    /* var pattern = /^[\w]+\.(zip|rar|gz)$/; //|选择符必须用分组符号包含起来 var str = '123.7z'; alert(pattern.test(s ...

  10. 重新认识Box Model、IFC、BFC和Collapsing margins

    尊重原创,转载自: http://www.cnblogs.com/fsjohnhuang/p/5259121.html 肥子John^_^ 前言   盒子模型作为CSS基础中的基础,曾一度以为掌握了I ...

随机推荐

  1. 洛谷 P2587 解题报告

    P2587 [ZJOI2008]泡泡堂 题目描述 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏 ...

  2. Java多线程问题

    一. Java多线程: Java给多线程编程提供了内置的支持.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 多线程是多任务的一种特别的形式,但多线 ...

  3. Ubuntu命令操作

    1../ 当前路径2.ls 列举当前路径下的所有文件及文件夹 默认情况不显示隐藏文件 ls -a 显示隐藏文件 ls -lah h是文件大小 l是显示文件3.cd 跳转路径4.pwd 查看当前所在路径 ...

  4. Python_重写集合

    class Set(object): def __init__(self,data=None): if data == None: self.__data = [] else: if not hasa ...

  5. 为什么选择Spring Boot作为微服务的入门级微框架

    摘要:1. Spring Boot是什么,解决哪些问题 1) Spring Boot使编码变简单 2) Spring Boot使配置变简单 3) Spring Boot使部署变简单 4) Spring ...

  6. 工作流引擎Activiti 专题

    https://github.com/Activiti/Activiti Quick Start Guide This quick start assumes: Familiarity with Ma ...

  7. ASP.Net MVC 在控制器中获取View中的form表单值的方法

    在网站开发中,我们常常需要用到表单提交的方式,那么在MVC中是如何获取到表单中的数据呢?下面我们来介绍以下几种方式 首先我们先看看View前台页面 添加一个控制器 我们再看看前台页面的代码 @{ La ...

  8. Android软键盘弹出,覆盖h5页面输入框问题

    之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位 ...

  9. 关于Kafka配额的讨论(1)

    Kafka自0.9.0.0版本引入了配额管理(quota management),旨在broker端对clients发送请求进行限流(throttling).目前Kafka支持两大类配额管理: 网络带 ...

  10. 【cogs 775】山海经 ——Segment Tree

    题目链接:      TP 题解:   我数据结构真心是弱啊= =. 线段树好厉害啊,一直不会区间最大连续和,今天刚学习了一下233. 维护前缀最大和后缀最大,越界最大(?),再维护一个区间最大,瞎搞 ...