CSS3图片边框
使用CSS3 border-i***ge属性，可以设置元素周围的图片边框。
首先，浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
在数字后面使用-webkit-或-moz-时，需要指定一个前缀。
第二，CSS3边框-图像属性
CSS3 border-i***ge属性允许您指定要使用的图像，而不是元素周围的普通边框。该属性有三个部分:
作为边框的图片。在哪里分割图像。确定中间部分应重复或延伸。
用下面的图像(名为“border.png & # 8221)比如:
原理分析:
Border-i***ge把图像分成九个部分，就像一个井字游戏棋盘。然后将边角放在边角处，按规定顺序重复或拉伸中间部分。
注意:
为了让border-i***ge正常工作，该元素还需要设置border属性！
1。在图像的中间部分重复创建边界，并将图片用作边界
CSS代码:
<!DOCTYPE CSS><CSS lang="en"><head> <meta charset="UTF-8"> <title>项目</title></head><body> <p id="borderimg">在这里，图像的中间部分被延伸来创建边界.</p> <p>这里是原始图像:</p><img src="img/border.png"></body></CSS>
代码如下:
#borderimg { border: 10px solid transparent; padding: 15px; -webkit-border-i***ge: url(img/border.png) 30 round; /* Safari 3.1-5 */ -o-border-i***ge: url(img/border.png) 30 round; /* Opera 11-12.1 */ border-i***ge: url(img/border.png) 30 round;}
2。图像中间部分延伸到创作边界:以图片为边界！
示例代码:
#borderimg { border: 10px solid transparent; padding: 15px; -webkit-border-i***ge: url(img/border.png) 30 stretch; /* Safari 3.1-5 */ -o-border-i***ge: url(img/border.png) 30 stretch; /* Opera 11-12.1 */ border-i***ge: url(img/border.png) 30 stretch; }
注意:border-i***ge属性是border-i***ge-source、border-i***ge-slice、border-i***ge-width、border-i***ge-output和border-i***ge-repeat的缩写。
1.不同的切片值
不同的切片值会完全改变边框的外观:
示例1
border-i***ge:URL(border . png)50 round；
#borderimg1 {border: 10px solid transparent;padding: 15px;-webkit-border-i***ge: url(img/border.png) 50 round;/* Safari 3.1-5 */-o-border-i***ge: url(img/border.png) 50 round;/* Opera 11-12.1 */border-i***ge: url(img/border.png) 50 round;}
示例2
border-i***ge:URL(border . png)20% round；
#borderimg2 {border: 10px solid transparent;padding: 15px;-webkit-border-i***ge: url(img/border.png) 20% round;/* Safari 3.1-5 */-o-border-i***ge: url(img/border.png) 20% round;/* Opera 11-12.1 */border-i***ge: url(img/border.png) 20% round;}
示例3
border-i***ge:URL(border . png)30% round；
代码如下:
#borderimg3 {border: 10px solid transparent;padding: 15px;-webkit-border-i***ge: url(img/border.png) 30% round;/* Safari 3.1-5 */-o-border-i***ge: url(img/border.png) 30% round;/* Opera 11-12.1 */border-i***ge: url(img/border.png) 30% round;}
三。摘要
摘要:以CSS为基础，介绍了用CSS定义图片边框的知识点，详细说明了属性的基本概念、边框图像的用法以及实际应用中需要注意的问题。通过实例的演示。希望能帮助你更好的学习CSS。
本文来自长街旧人投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/545173.html
微信扫一扫 
