时间:2021-07-01 10:21:17 帮助过:13人阅读
CSS3 border-image属性
作用:使用图片来创建边框
说明:复合属性。设置或检索对象的边框样式使用图像来填充。可以一次性设置: border-image-source,border-image-slice,border-image-width,border-image-outset和border-image-repeat属性的值。
语法:
- border-image: source slice width outset repeat|initial|inherit;
参数:
border-image-source:用于指定要用于绘制边框的图像的位置。
border-image-slice:图像边界向内偏移。
border-image-width: 图像边界的宽度。
border-image-outset:用于指定在边框外部绘制 border-image-area 的量。
border-image-repeat:用于设置图像边界是否应重复(repeat)、拉伸(stretch)或铺满(round)。
css3 border-image属性使用示例
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- div
- {
- border:15px solid transparent;
- width:300px;
- padding:10px 20px;
- }
- #round
- {
- -moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
- /* Old Firefox */
- -webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
- /* Safari and Chrome */
- -o-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
- /* Opera */
- border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 round;
- }
- #stretch
- {
- -moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
- /* Old Firefox */
- -webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
- /* Safari and Chrome */
- -o-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
- /* Opera */
- border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg) 30 30 stretch;
- }
- </style>
- </head>
- <body>
- <div id="round">在这里,图片铺满整个边框。</div>
- <br>
- <div id="stretch">在这里,图片被拉伸以填充该区域。</div>
- <p>这是我们使用的图片:</p>
- <img src="https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg">
- <p><b>注释:</b> Internet Explorer 不支持 border-image 属性。</p>
- <p>border-image 属性规定了用作边框的图片。</p>
- </body>
- </html>
效果图:
以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。更多精彩内容大家可以关注Gxl网相关教程栏目!!!
以上就是border-image属性怎么用的详细内容,更多请关注Gxl网其它相关文章!