CSS3学习系列之背景相关样式（二）
- 在border-radius属性中指定两个半径
在border-radius属性中，可以指定两个半径，指定方法如下所示：
border-radius:40px 20px;
针对这种情况，各种浏览器的处理方式并不一致，在chrome浏览器与safari浏览器中，会绘制出一个椭圆形边框，第一个半径为椭圆的水平方向半径，第二个半径为椭圆的垂直方向半径，在firefox浏览器与opera浏览器中，将第一个半径作为边框左上角与右下角的园半径来绘制，将第二个半径作为边框右上角与左下角的园半径来绘制。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制圆角边框示例</title> <style> div{ border:solid 5px blue; border-radius:40px 20px; -moz-border-radius:40px 20px; -o-border-radius:40px 20px; -webkit-border-radius:40px 20px; background-color: skyblue; padding: 20px; width: 180px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
- 不显示边框的时候
在css3中，如果使用了border-radius属性但是把边框设定为不显示的时候，浏览器将把背景的四个角绘制为圆角，例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制圆角边框示例</title> <style> div{ border:none; border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; -webkit-border-radius:20px; background-color: skyblue; padding: 20px; width: 180px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
- 修改边框种类的时候
使用了border-radius属性后，不管边框是什么种类，都会将边框沿着圆角曲线进行绘制，例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制圆角边框示例</title> <style> div{ border:dashed 5px blue; border-radius:20px; -moz-border-radius:20px; -o-border-radius:20px; -webkit-border-radius:20px; background-color: skyblue; padding: 20px; width: 180px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
- 绘制四个角不同半径的圆角边框
如果要绘制的圆角的四个角半径各不相同，可以将border-top-left-radius属性（指定左上角半径）、border-top-right-radius属性（指定右上角半径）、border-bottom-right-radius属性（指定右下角半径）、border-bottom-left-radius属性（指定左下角半径）。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绘制圆角边框示例</title> <style> div { border: solid 5px blue; border-radius-topleft: 10px; border-radius-topright:20px; border-radius-bottomright:30px; border-radius-bottomright:40px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 30px; -moz-border-radius-bottomleft: 40px; -o-border-radius-topleft:10px; -o-border-radius-topright:20px; -o-border-radius-bottomright:30px; -o-border-radius-bottomleft:40px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 30px; -webkit-border-bottom-right-radius: 40px; background-color: skyblue; padding: 20px; width:180px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
- border-image属性
在css3之前，如果要使用图像边框，若元素的长或宽是随时可变的，页面制作者通常采用的做法是让元素的每条边单独使用一幅图像文件，但是，这种做法也有缺点：一方面是比较麻烦，另一方面是页面上使用的元素也变得比较多了。
针对这种情况，css3中增加了一个border-image属性，可以让处于随时变化状态的元素的长或宽的边框统一使用同一个图像文件来绘制，使用border-image属性，会让浏览器在显示图像边框时，自动将所使用到的图像分割为9个部分进行处理，这样就不需要页面制作者再另外进行人工处理了。另外，页面中也不需要因此而使用较多的元素了。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-image属性的使用示例</title> <style> div { border-image: url(border.jpg) 20 20 20 20/20px; -webkit-border-image: url(border.jpg) 20 20 20 20/20px; -moz-border-image: url(border.jpg) 20 20 20 20/20px; width: 200px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
- border-image属性简单的使用方法
border-image:url(图像文件的路径) A B C D
-webkit-border-image:url(图像文件的路径) A B C D
-moz-border-image:url(图像文件的路径)A B C D
border-image属性值中至少必须指定五个参数，其中第一个参数为边框所使用的图像文件的路径，A、B、C、D四个参数表示当浏览器自动把边框所使用到的图像进行分隔时的上边距、右边距、下边距及左边距。
对于border-top-image、border-left-image、border-right-image、border-bottom-image这四部分，浏览器分别作为上边框使用图像、左边框使用图像、右边框使用图像、下边框使用图像来进行显示，必要时可以将这四部分图像进行平铺或伸缩。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>border-image属性的简单的使用方法</title> <style> div { border:solid 5px; border-image: url(border.jpg) 18 18 18 18; -webkit-border-image: url(border.jpg) 18 18 18 18; -moz-border-image: url(border.jpg) 18 18 18 18; width: 300px; } </style> </head> <body> <div>文字问文字问文字问文字问文字问文字问文字问</div> </body> </html>
- 使用border-image属性来指定边框宽度
在css3中，除了可以使用border属性或border-width属性来指定边框的宽度外，使用border-image属性同样可以指定边框的宽度，指定方法如下所示：
border-image:url(图像文件的路径) A B C D/border-width
可以在border-image属性中将四条边的边框指定为不同宽度，例如：
div{ border:solid; border-image:url(borderimage.png) 18/5px 10px 15px 20px; -webkit-border-image:url(borderimage.png) 18/5px 10px 15px 20px; -moz-border-image:url(borderimage.png) 18/5px 10px 15px 20px; width:300px; }
- 指定四条边中图像的显示方法
可以在border-image属性中指定元素四条边中的图像时可以拉伸的方式显示，还是以平铺的方式显示，指定方法如下所示：
border-image:url(文件路径) A B C D/border-width topbottom leftright
其中，topbottom表示元素的上下两条边中图像的显示方法，leftright表示元素的左右两条边中的显示方法。在显示方法中可以指定的值为repeat、stretch、round三种。
repeat：图像将以平铺的方式进行显示。例子如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>指定四条边中图像为平铺显示</title> <style> div { border-image: url(border.jpg) 18/5px repeat repeat; -webkit-border-image: url(border.jpg) 18/5px repeat repeat; -moz-border-image: url(border.jpg) 18/5px repeat repeat; width: 300px; height: 200px; } </style> </head> <body> <div></div> </body> </html>
