当前阅读教程:CSS3教程 > background-clip 属性 | |||||||||||||||||
阅读(22555525) 收藏 赞(5685) 分享 | |||||||||||||||||
上一篇: CSS3 背景 | 下一篇: background-origin 属性 | ||||||||||||||||
标签定义及使用说明background-clip属性指定背景绘制区域。
语法background-clip: border-box|padding-box|content-box; 值说明
实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>background-clip 属性</title> <!--定义内部样式--> <style> .css1{ border: 10px dotted black;/*边框*/ padding:35px;/*内边距*/ background: yellow;/*背景颜色*/ } .css2{ border: 10px dotted black;/*边框*/ padding:35px;/*内边距*/ background: yellow;/*背景颜色*/ background-clip: padding-box;/*背景绘制在衬距方框内*/ } .css3{ border: 10px dotted black;/*边框*/ padding:35px;/*内边距*/ background: yellow;/*背景颜色*/ background-clip:content-box;/*背景绘制在内容方框内*/ } </style> </head> <body> <div> 没有背景剪裁 (border-box没有定义) </div><br> <div> background-clip: padding-box </div><br> <div> background-clip: content-box </div> </body> </html> 效果图 |
|||||||||||||||||
上一篇: CSS3 背景 | 下一篇: background-origin 属性 |