border-image

https://www.w3school.com.cn/cssref/pr_box-shadow.asp

border-images-* 可以构建扩展按钮

语法

border-image: source slice width outset repeat;

border-image 属性是一个简写属性，用于设置以下属性：

  • border-image-source 边框的图片的路径
  • border-image-slice 图片边框向内偏移
  • border-image-width 图片边框的宽度。
  • border-image-outset 边框图像区域超出边框的量。
  • border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。

兼容性

Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。

Safari 5 支持替代的 -webkit-border-image 属性。

border-image-slice

用以指定从哪 4 个位置分割图像（上右下左的顺序）。

border-image-slice

参数可以填 5个，

前1~4 个参数 是按照线的位置分割，按照 上 右 下 左的顺序进行分割， 值的设置跟其他值的缩写方式一样，

提供 2个 值 就是 上下 和 左右。

提供1个值 就设置4条线的位置。

注意 只能填数字， 百分比， 不能加上px。 100 就等于100px

到底是怎么分割法的呢。 蓝色数字 9 ，是内容区。 如果不填上第五个参数 fill， 是会空白的。

使用的图片

border-image-width

边框图片的宽度。 值有如下

  • 数字，数字为倍数的意思，1的话， 就是 1 * border-width。
  • px
  • auto。 auto计算方式为：取 border-image-slice 的值，然后加上 px 如果border-image-slice 的值为 100， 那么取过来， 加上 px 就是 100px。
  • 值不可为负数

说明： border-image-width 最大不超过盒子的width。

例子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<style type="text/css">

    div {

        width: 81px;

        height: 81px;

        border-image-source: url("border-image.png");

        border-image-width: 54px;

        border-image-slice: 27 27 27 27 fill;

        border-image-repeat: repeat;

    }

</style>

<body>

    <div></div>

</body>

</html>

设置div宽 高都为81px，当切片值为27 宽度为27时，在9个切片中，除内容块外的每块都是27px。

当border-image-slice为27，border-image-width为41px时，边框显示的为41，但是border填充的内容图片为slice设置的27。

最大显示内容不超过区域的上、右、下、左之和等于 div设置的width与height的值。

border-image-width 的值不可为负数

border-image-outset

作用是让边框图像外凸，延伸到盒子外面。

语法

border-image-outset : [ <length> | <number> ]{1,4}

学习资料 https://www.w3school.com.cn/cssref/pr_border-image-outset.asp

border-image-repeat

定义边框图像的 9 个切片中，top、right、bottom、left对应的 4 个切片是以拉伸方式显示，还是以平铺方式显示。

CSS3边界图片的更多相关文章

  1. 第八十节，CSS3边框图片效果

    CSS3边框图片效果 学习要点: 1.属性初探 2.属性解释 3.简写和版本 本章主要探讨HTML5中CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩. 一．属性解释     CSS3 ...

  2. jQuery/CSS3实现图片层叠展开特效

    这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...

  3. 使用纯css3实现图片轮播

    <!DOCTYPE html> <html> <head> <title> 飛天网事--纯CSS代码实现图片轮播 </title> < ...

  4. css3实现图片旋转效果

    css3实现图片旋转效果 近期实现一个消息提醒(醒目)的需求页面.想到了css3的旋转动画,故使用. =============== 鼠标悬浮时候,图片可以旋转,放大 rotate(360deg) s ...

  5. css3 实现图片等比例放大与缩小

    css3 实现图片等比例放大与缩小 在工作中,经常会碰到图片缩放的情况,比如服务器端返回的图片大小,可能大小不同,有的大,有的小,服务器端返回的图片大小我们不能控制的,但是在我们设计稿的时候,可能会规 ...

  6. CSS3实现图片木桶布局

    CSS3实现图片木桶布局 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <script> window.navigator.appVersion.inde ...

  7. 纯css3实现图片三角形排列

    当今是个读图时代.纯大部分网页或多或少都会用到图片.特别是图片较多的网页.图片的布局和排版就非常重要了.今天要给大写带来一款纯css3实现图片三角形排列.适合一系列的图片.效果图如下: 在线预览    ...

  8. CSS3实现图片黑白滤镜居中，hover缩放遮罩的效果

       hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...

  9. 纯CSS3实现图片展示特效

    本文中要实现的一个纯CSS3的图片展示特效,以前只能用JavaScript实现,可想而知会受到多方面的限制,特别是性能.而今天我们将用简单的CSS3代码实现,你会发现它的动画效果在现代浏览器的帮助下无 ...

随机推荐

  1. Java中的IO流 - 入门篇

    前言 大家好啊,我是汤圆,今天给大家带来的是<Java中的IO流-入门篇>,希望对大家有帮助,谢谢 由于Java的IO类有很多,这就导致我刚开始学的时候,感觉很乱,每次用到都是上网搜,结果 ...

  2. 我叫小M，立志建立MySQL帝国。

    我是小M,我在卡拉巴拉星球. 我喜欢数据,我立志成为一个数据管理者. 所以我来 Y 公司应聘,听说他们的数据量挺大的. 面试过程还是挺简单的. 我用 007 这三个数字就轻易打败了一堆吹嘘 996 的 ...

  3. c++一些概念

    面向对象语言三大特征: 封装,多态,继承 封装: 1.将函数定义到结构体内部,就是封装. 2.编译器会自动传递结构体的指针给函数. 类: 带有函数的结构体,称为类. 成员函数: 结构体里面的函数,称为 ...

  4. CVPR2021| 继SE,CBAM后的一种新的注意力机制Coordinate Attention

    前言: 最近几年,注意力机制用来提升模型性能有比较好的表现,大家都用得很舒服.本文将介绍一种新提出的坐标注意力机制,这种机制解决了SE,CBAM上存在的一些问题,产生了更好的效果,而使用与SE,CBA ...

  5. [Fundamental of Power Electronics]-PART II-8. 变换器传递函数-8.5 交流传递函数以及阻抗的测量/8.6 本章小结

    8.5 交流传递函数以及阻抗的测量 测量原型变换器和变换器系统的传递函数是非常好的工程实践过程.这样的实践可以验证系统是否被正确地建模和设计.此外,通过测量单个电路元件的端阻抗来表征其特性也是非常有用 ...

  6. Dapper, Ef core, Freesql 插入大量数据性能比较（二）

    在上一篇文章中,我们比较出单表插入9999行数据,Dapper > EfCore > Freesql.在本文中,我们来看看级联插入 构建9999行数据 List<Entity> ...

  7. OO_Unit4暨学期总结

    OO_Unit4暨学期总结 一.本单元架构设计 1.1 第13次作业架构设计 就我个人而言,这次作业应该是本单元难度最大的一次作业,原因在于陡然转向UML后,对UML各个元素的关系理解需要先下一番功夫 ...

  8. Spring（一）简介和配置

    知识补充: 那么什么是xmlns呢?xmlns其实是XML Namespace的缩写,可译为"XML命名空间",但个人觉得,翻译后的名字反而不好理解,所以我们就叫它为XML Nam ...

  9. create-react-app 核心思路分析

    原文链接:http://axuebin.com/articles/fe-solution/cli/cra.html,转载请联系 Create React App is an officially su ...

  10. Mysql 事务特性和隔离级别

    事务的特性 原子性(Atomicity) 一个事务(transaction)中的所有操作,要么全部完成,要么全部不完成,不会结束在中间某个环节.事务在执行过程中发生错误,会被回滚(Rollback)到 ...