|盒子装饰|

这个 盒子装饰破裂属性 是用来控制盒子装饰后段落的碎片。它定义了一个元素的背景、填充、边框、边距和剪辑路径,当该元素的长方体被拆分为多个单独的部分时,将应用该元素。

null

默认值:

语法:

box-decoration-break: slice|clone|initial|inherit;

属性值:

切片: 该属性将元素片段的边作为一个整体断开。

  • 语法:
box-decoration-break: slice;
  • 例子:

HTML

<!DOCTYPE html>
< html >
< head >
< title >box-decoration-break property</ title >
< style >
body {
text-align:center;
width:80%;
}
span {
border: 2px solid green;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.geek{
-webkit-box-decoration-break: slice;
-o-box-decoration-break: slice;
box-decoration-break: slice;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< h2 >box-decoration-break: slice;</ h2 >
< span class = "geek" >
Prepare for the Recruitment drive
of product based companies< br >
like Microsoft, Amazon, Adobe etc
with a free online placement< br >
preparation course. The course focuses
on various MCQ's & Coding< br >
question likely to be asked in the
interviews & make your< br >
upcoming placement season efficient
and successful.
</ span >
</ body >
</ html >


  • 输出:

border

克隆: 它被用来装饰元素的每个片段,就好像这些片段是完整的、独立的元素。边框环绕元素每个片段的四条边,并为每个片段重新绘制完整的背景。

  • 语法:
box-decoration-break: clone;
  • 例子:

HTML

<!DOCTYPE html>
< html >
< head >
< title >box-decoration-break property</ title >
< style >
body {
text-align:center;
width:80%;
}
span {
border: 2px solid green;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.geek{
-webkit-box-decoration-break: clone;
-o-box-decoration-break: clone;
box-decoration-break: clone;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< h2 >box-decoration-break: clone;</ h2 >
< span class = "geek" >
Prepare for the Recruitment drive
of product based companies< br >
like Microsoft, Amazon, Adobe etc
with a free online placement< br >
preparation course. The course focuses
on various MCQ's & Coding< br >
question likely to be asked in the
interviews & make your< br >
upcoming placement season efficient
and successful.
</ span >
</ body >
</ html >


  • 输出:

border

首字母: 它将属性设置为其默认值。

  • 语法:
box-decoration-break: initial;
  • 例子:

HTML

<!DOCTYPE html>
< html >
< head >
< title >box-decoration-break property</ title >
< style >
body {
text-align:center;
width:80%;
}
span {
border: 2px solid green;
padding: 5px;
border-radius: 6px;
font-size: 24px;
line-height: 3;
}
span.geek{
-webkit-box-decoration-break: initial;
-o-box-decoration-break: initial;
box-decoration-break: initial;
}
.gfg {
font-size: 40px;
color: green;
font-weight: bold;
}
</ style >
</ head >
< body >
< div class = "gfg" >GeeksforGeeks</ div >
< div class = "geeks" >
A computer science portal for geeks
</ div >
< h2 >box-decoration-break: initial;</ h2 >
< span class = "geek" >
Prepare for the Recruitment drive
of product based companies< br >
like Microsoft, Amazon, Adobe etc
with a free online placement< br >
preparation course. The course focuses
on various MCQ's & Coding< br >
question likely to be asked in the
interviews & make your< br >
upcoming placement season efficient
and successful.
</ span >
</ body >
</ html >


  • 输出:

border

支持的浏览器: 支持的浏览器 盒子装饰破裂属性 以下列出了:

  • 谷歌Chrome 22.0-webkit-
  • Firefox 32.0
  • Opera 11.5-webkit-
  • Safari 6.1-webkit-
© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞7 分享