css3怎么实现花边边框

导读 在css中,可以利用border-image属性来实现花边边框。border-image属性可以使用.....

在css中,可用border-image实现花边框的属性。border-image属性可以用图片创建边框,即在边框上添加背景图片,只需将背景图片指定为花边样式即可;语法border-image: url(图片路径) 向内偏移值 图像边界宽度 outset 是否重复;

前端(vue)入门精通课程:入学

本教程的操作环境: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 */

(学习视频分享:css视频教程、web前端)

以上就是css3怎么实现花边边框的详细内容,更多请关注php中文网其他相关文章!

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。2022-09-17 00:00:22

猜你喜欢

最新文章