ch4 圆角框
固定宽度的圆角框
只需要两个图像:一个应用于框的顶部,一个应用于底部
<div class="box"> <h2>Lorem Ipsum</h2> <p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p> </div> <style> .box { width: 424px; //框的宽度必须与顶部和底部图像的宽度一致 background: url(img/tile2.gif) repeat-y;//在框上设置重复显示的背景图像 } .box h2 { background: url(img/top2.gif) no-repeat left top;//顶部图像应用于标题元素 padding-top: 20px; } .box .last { background: url(img/bottom2.gif) no-repeat left bottom;//底部图像应用于文字元素 padding-bottom: 20px; } .box h2, .box p { padding-left: 20px;//设置padding使得内容不碰到框的边界 padding-right: 20px; } p { margin: 0; /* fixes bug in IE */ } </style>
![](http://upload-images.jianshu.io/upload_images/7693255-470780d15febeedf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![随着内容的增加,框垂直扩展(但不会水平扩展)](http://upload-images.jianshu.io/upload_images/7693255-02a34d970d0db38a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
随着内容的增加,框垂直扩展(但不会水平扩展)
灵活的圆角框(滑动门技术)
不要使用一个图像组成顶部和底部图像,而是应用两个相互重叠的图像,随之框尺寸的增加,大图像就会有更多部分显露出来,就实现了框扩展的效果------滑动门技术。一个图像在另一个图像上滑动,将它的一部分隐藏了起来,所以需要更多的图像,则必须在标记中添加两个额外的无语义元素。
bottom-left.gif应用于主框div,bottom-right.gif应用于外边的div,top-left.gif应用于内部的div,top-right.gif应用于标题。
![](http://upload-images.jianshu.io/upload_images/7693255-6088c3ad607ff83a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
<div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.<p> </div> </div> </div> <style> .box { width: 20em;//框的宽度以em为单位,框会随着文本尺寸进行伸缩,也可以设置为%,框就会随着浏览器窗口的尺寸进行伸缩 background: url(img/bottom-left.gif) no-repeat left bottom; //bottom-left.gif应用于主框div } .box-outer { background: url(img/bottom-right.gif) no-repeat right bottom; //bottom-right.gif应用于外边的div padding-bottom: 1px; } .box-inner { background: url(img/top-left.gif) no-repeat left top; //top-left.gif应用于内部的div } .box h2 { background: url(img/top-right.gif) no-repeat right top; //top-right.gif应用于标题 padding-top: 1em; } .box h2, .box p { padding-left: 1em; padding-right: 1em; } </style>
![](http://upload-images.jianshu.io/upload_images/7693255-5d50871506ff6c70.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![字号增加,文本尺寸增加,圆角框会进行水平和垂直扩展](http://upload-images.jianshu.io/upload_images/7693255-724db148f1173d1a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
字号增加,文本尺寸增加,圆角框会进行水平和垂直扩展
CSS3新特性
- 多个背景图像:不是定义一个背景图像,而是使用任意数量的图像,用background-image定义要使用的所有图像,background-repeat指定是否应该重复显示,用background-position设置它们的位置。
<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> <style> .box { background-image: url(img/mtop-left.gif), url(img/mtop-right.gif), url(img/mbottom-left.gif), url(img/mbottom-right.gif); background-repeat: no-repeat, no-repeat, no-repeat, no-repeat; background-position: top left, top right, bottom left, bottom right; } </style>
- border-radius:设置边框角的半径。
- border-image:允许指定一个图像作为元素的边框,根据一些百分比规则把图像划分为9个单独的部分,浏览器会自动的使用适当的部分作为边框的对应部分---九分法缩放,有助于避免在调整圆角框大小时出现的失真。
<div class="box"> <h2>Yet Another Rounded Corner Box</h2> <p>This is another rounded corner box......</p> </div> .box { -webkit-border-image: url(img/corners.gif) 25% 25% 25% 25% / 25px round round; }
![](http://upload-images.jianshu.io/upload_images/7693255-f85e6dd09e180834.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
在距离框的顶边和底边25%的地方画两条线,在距离左边和右边25%的地方画两条线,框就形成了9个部分。
border-image属性会自动的把图像的每个部分用于对应的边框,因此,图像的左上部分用作左上边框,右边中间部分用作右边的边框。25px是边框的宽度,如果图像不够大,它们会自动平铺,产生一个可扩展的框。