css3 背景相关的新增属性
2016-09-06 21:11
561 查看
先上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3</title> <style> div{ background-color: black; border:dashed 15px green; padding:30px; color:white; font-size: 30px; font-weight: bold; margin-top: 10px; /*background-image: url("img.png");*/ /*background-repeat: no-repeat;*/ } .div1{ background-clip: border-box; /*background-origin: border-box;*/ } .div2{ background-clip: padding-box; /*background-origin: padding-box;*/ } .div3{ background-clip: content-box; /*background-origin: content-box;*/ } </style> </head> <body> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </body> </html>
这里面用了background-clip属性,border-box:包括边框在内;padding-box:包括padding在内,不包括边框;content-box:只包含了content内容,border和padding都不包括。
background-origin是搭配背景图片使用的,它的使用方式和方法与background-clip相似。
相关文章推荐
- CSS3-新增背景系列background相关属性
- CSS3背景相关新增属性
- CSS3新增的有关背景与边框的属性
- css3中新增的背景属性
- CSS3——新增背景属性和边框样式
- css3背景、边框、和补丁相关属性 (二)
- h5-css3新增背景属性
- css3中background新增的4个新的相关属性用法介绍
- CSS3中新增的背景属性
- 09、CSS3新增背景属性
- css3新增背景属性background-clip/background-origin/background-size
- css3背景、边框、和补丁相关属性
- 8.HTML5 CSS3 背景、边框与补丁相关属性
- CSS3背景渐变属性 linear-gradient(线性渐变)和radial-gradient(径向渐变)。
- CSS3的新增属性border-image
- CSS3新增属性text-shadow详解及燃烧的字体实战开发
- CSS3学习笔记之与背景相关的样式
- CSS3新增颜色表示方式 Transparent属性 Opacity属性
- 8.HTML5 CSS3 变形与动画相关属性
- [CSS3] 新增属性用法整理