189 8069 5689
这篇文章主要介绍“css3如何实现花边边框”，在日常操作中，相信很多人在css3如何实现花边边框问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3如何实现花边边框”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了丰泽免费建站欢迎大家使用！
在css中，可以利用border-image属性来实现花边边框。border-image属性可以使用图片来创建边框，即给边框加上背景图片，只需要将背景图片指定为花边样式即可；语法“border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;”。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
在css中，可以利用border-image属性来实现花边边框。
css border-image属性
border-image属性可以使用图片来创建边框，即给边框加上背景图片。没错，就是平常那一小小条的边框，也能加图片。
border-image是一个简写属性：
border-image-source：用于指定要用于绘制边框的图像的位置
border-image-slice：图像边界向内偏移
border-image-width：图像边界的宽度
border-image-outset：用于指定在边框外部绘制 border-image-area 的量
border-image-repeat：用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。
省略的值设置为它们的默认值。
1、border-image-source: url()
设置边框图片的路径
2、border-image-slice: 100 100 100 100 fill
用以指定从哪 4 个位置分割图像（遵循上右下左的顺序）。
参数可以填 5个， 前1~4 个参数 是按照线的位置分割，按照 上 右 下 左的顺序进行分割， 值的设置跟其他值的缩写方式一样， 提供 2个 值 就是 上下 和 左右， 提供1个值 就设置4条线的位置。 注意 只能填数字， 百分比， 不能加上px。 100 就等于 100px
那么到底是怎么分割法的呢，看下面的图片详解，看起来可能有点乱， 认真看，还是看得懂的呢。 蓝色数字 9 ，是内容区。 如果不填上第五个参数 fill， 是会空白的。
3、border-image-width: 1
设置边框图片的宽度。 可以设置 数字， 和 px， 数字的话是几倍的意思。 1的话， 就是 1 * border-width, 也可以设置auto。 auto的计算方式是，取 border-image-slice 的值，然后加上 px 如果border-image-slice 的值为 100， 那么取过来， 加上 px 就是 100px。
4、border-image-outset: 100px 100px 100px 100px
在原来的基础上， 上 右 下 左 扩大100px , 可以简写。 也可以设置数字， 数字也一样。是几倍的意思。 1 代表 1倍 也就是 1* border-width(100) = 100px
5、border-image-repeat:
参数：stretch repeat round space
按照什么方式来 平铺。 可以填 两个参数， 一个参数， 代表 四个方向的平铺一样。 两个参数，第一个值 代表 水平方向，第二个值代表 垂直方向。
网上截图，截的不好， 所以有中间那个小红点，忽略它就好。 这个方法，兼容情况不是很好，一般没有特殊情况，不会去设置它的。
最后，简写方式：
只能填，三个参数。 slice 和repeat 是可以填多个值的。
border-image: url(./img/Snipaste_2019-07-16_16-39-16.png) 100 space; /* 简写： 三个参数 source slice repeat */
到此，关于“css3如何实现花边边框”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！