这个 盒子装饰破裂属性 是用来控制盒子装饰后段落的碎片。它定义了一个元素的背景、填充、边框、边距和剪辑路径,当该元素的长方体被拆分为多个单独的部分时,将应用该元素。
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 > |
- 输出:
克隆: 它被用来装饰元素的每个片段,就好像这些片段是完整的、独立的元素。边框环绕元素每个片段的四条边,并为每个片段重新绘制完整的背景。
- 语法:
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 > |
- 输出:
首字母: 它将属性设置为其默认值。
- 语法:
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 > |
- 输出:
支持的浏览器: 支持的浏览器 盒子装饰破裂属性 以下列出了:
- 谷歌Chrome 22.0-webkit-
- Firefox 32.0
- Opera 11.5-webkit-
- Safari 6.1-webkit-
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END