css3的background-clip 背景
2013-12-02 18:11
573 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> .c-box{ width:100px; height:100px; padding:20px; background-color:#0FF; background-clip: content-box; border:2px solid #92b901; } .p-box{ width:100px; height:100px; padding:10px; background-color:#0F0; background-clip: padding-box; border:10px dashed #92b901; } .b-box{ width:100px; height:100px; padding:10px; background-color:#FF0; background-clip: border-box; border:5px dashed #92b901; } </style> <title>无标题文档</title> </head> <body> <div class="c-box"> content-box 的效果 </div> <br /> <div class="p-box"> padding-box 的效果 </div> <br /> <div class="b-box"> border-box 的效果 </div> </body> </html>
浏览器支持
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。注释:Internet Explorer 8 以及更早的版本不支持 background-clip 属性。
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。
效果图:
相关文章推荐
- 推荐大家使用的CSS书写规范、顺序
- div css
- CSS伪类
- css style override
- css3的rotate
- [CSS3学习]用CSS3做一个圆圈等待条动画效果
- QGraphicsView与QGraphicsScene Qt窗体的消息传递
- CSS样式子代选择符(大于号 >)使用实例
- CSS文字或图片悬浮于另一张图片上,大小宽度适配手机的!
- css样式中div永久居中
- css3 的 border-image
- css后代选择器使用方法实例
- css3的border-radius圆角
- css3 的 box-shadow
- div清除浮动css样式代码分享(4种方法)
- css中的clear属性使用方法实例介绍
- 使用css画三角形的方法代码
- css3高级选择器使用方法
- CSS的叠加
- MFC 窗体的样式