欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

border-image属性怎么用

发布时间:2019-05-21  编辑:杨雨个人博客网站   点击:   

边界图像属性是一个是一个简写属性,通过该属性可使用图片来创建边框。

 

边界图像属性怎么用

CSS3 border-image属性

作用:使用图片来创建边框

说明:复合属性。设置或检索对象的边框样式使用图像来填充。可以一次性设置:border-image-source,border-image-slice,border-image-width,border-image-outset和border-image-重复属性的值。

语法:

border-image:source slice width outset repeat | initial | inherit;

参数:

边界图像源:用于指定要用于绘制边框的图像的位置。

边界图像切片:图像边界向内偏移。

border-image-width:图像边界的宽度。

border-image-outset:用于指定在边框外部绘制border-image-area的量。

边界图像重复:用于设置图像边界是否应重复(重复),拉伸(拉伸)或铺满(圆形)。

Css3 border-image属性使用示例

<!DOCTYPE Html>
<HTML>
<HEAD>
<风格> 
DIV
{
边框:15px坚固透明;
宽度:300像素;
填充:10px 20px;
}

#回合
{
-moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)30 30 round; / *旧版Firefox * /
-webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)30 30 round; / * Safari和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;
}

#伸展
{
-moz-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)30 30 stretch; / *旧版Firefox * /
-webkit-border-image:url(https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg)30 30 stretch; / * Safari和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;
}
</样式>
</ HEAD>
<BODY>

<div id =“round”>在这里,图片铺满整个边框。</ div>
点击
<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>

效果图:

1.JPG

本文地址:http://itbyc.com/web/css3/19657.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1