精通CSS/四/多个背景图像&border-image

来源：互联网发布：mac 图片处理编辑：程序博客网时间：2024/06/17 04:42

1.多个背景图像

<!doctype html><html><head><title>My Rounded Corner Box</title><meta charset='utf-8'><link rel="stylesheet" type="text/css"><style type="text/css">.box{width: 30em;background: #88ac11 url(images/mtop-left.gif) no-repeat top left;color:#fff;padding:2em 2em 1em 2em ;margin-top: 2em;}h2{margin-top: 0;font-size: 1.6em;}/*在一个div中定义多个图像，通过对该属性值的一一对应从而应用样式*/.box{background-image: url(images/mtop-left.gif),url(images/mtop-right.gif),url(images/mbottom-left.gif),url(images/mbottom-right.gif);background-repeat: no-repeat,no-repeat,no-repeat,no-repeat;background-position: top left,top right,bottom left,bottom right;}</style></head><body><div class="box"><h2>My Rounded Corner Box</h2><p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images.</p></div></body></html>

Result:

2.border-image

<!doctype html><html><head><title>border-image</title><meta charset='utf-8'><link rel="stylesheet" type="text/css"><style type="text/css">.box{width: 30em;background: #89ac11;padding: 2em 2em 1em 2em;color:#fff;margin-top: 2em;}.box h2{margin-top: 0;font-size: 1.6em;}.box p{margin-bottom: 0;line-height: 1.5em;}/*【转】border-image详解：http://www.zhangxinxu.com/wordpress/2010/01/css3-border-image/图像来源（①注意图像名字正确与否②路径，弄明白相对于谁）/划分区域大小（九宫格）/裁剪大小/水平/垂直（repeat/round/stretch）repeat:按照原始规则一一置放，最后打破原始规则来适应环境（带有残缺）;around:开始就按照环境计算出适应的个体大小，从而铺满整个区域。*/.box{-webkit-border-image:url(images/corners.gif) 25% 25% 25% 25%/25px round round;}</style></head><body><div class="box"><h2>My Rounded Corner Box</h2><p>This is my rounded corner box. Isn't it spiffing! I think it's the best rounded corner box in the world. I mean, look at those corners. How round are they? Now take a look at the mark-up. That's right, no extraneous div's. Just pure HTML goodness. Sexy huh? I bet you're wondering how I did that? Well it's easy with CSS 3. You simply use multiple background images.</p></div></body></html>

Result:

阅读全文

0 0