使用CSS3将你的网站设计推向未来

Supported in Firefox, Safari and Chrome.

As used by: Twitter.

See also:

• W3C Working Draft
• Border-radius on CSS3.info
• The Art of Web

2. Border Image

Border-image, as the name suggests, allows an image file to be used as the border of an object. The image is first created in relation to each side of an object, where each side of the image corresponds to a side of the HTML object. This is then implemented with the following syntax:

1.  border: 5px solid #cccccc;   
2. -webkit-border-image: url(/images/border-image.png) 5 repeat;   
3. -moz-border-image: url(/images/border-image.png) 5 repeat;   
4. border-image: url(/images/border-image.png) 5 repeat;  

           border: 5px solid #cccccc;
          -webkit-border-image: url(/images/border-image.png) 5 repeat;
          -moz-border-image: url(/images/border-image.png) 5 repeat;
          border-image: url(/images/border-image.png) 5 repeat;

The {border: 5px} attribute specifies the overall width of the border, and then each border-image rule targets the image file and tells the browser how much of the image to use to fill up that 5px border area.

Border images can also be specified on a per-side basis, allowing for separate images to be used on each of the four sides as well as the four corners:

1. border-bottom-right-image   
2. border-bottom-image   
3. border-bottom-left-image   
4. border-left-image   
5.    border-top-left-image   
6.    border-top-image   
7.    border-top-right-image   

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!