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. Git基础知识之内部状态管理系统

    本文主要来介绍一下 Git 的内部状态管理系统.它利用基于节点和指针的数据结构来跟踪及管理编辑操作的时间线. 对本地项目而言,任一时刻,Git 处于三种状态中的一种:工作区状态.暂存区状态和提交区状态 ...

  2. OO_Unit4_Summary暨课程总结

    初始oo,有被往届传言给吓到:oo进行中,也的确有时会被作业困扰(debug到差点放弃):而oo即将结束的此刻,却又格外感慨这段oo历程. 一.单元架构设计 本单元任务是设计一个UML解析器,能够支持 ...

  3. C/C++中的字符串相关姿势

    这是我在<程序设计实习>课程上作的pre,目标是对C/C++中字符串的相关内容作一个尽量完整的介绍.(对于OIer可能不太实用) 课件链接: https://files.cnblogs.c ...

  4. linux下Mysql 8.0.19 编译安装

    1 前言 linux下安装MySQL的方式有很多种,包括以仓库的方式安装(yum,apt,zypper),以包的方式安装(rpm,deb),以docker方式安装,从压缩包解压安装,从源码编译安装,这 ...

  5. .netcore 写快递100的快递物流信息查询接口

    快递100的物流信息查询接口,官方提供了一些demo;还好官方提供的代码是.netcore版本写的,不过写的有点low;根据官方提供的代码,我按照.netcore 的风格重构了代码:核心代码如下: / ...

  6. 假如kubernetes不支持docker了该怎么办

    假如kubernetes不支持docker了该怎么办 从官网安装文档可以看到kubernetes支持一下几种: https://kubernetes.io/docs/setup/production- ...

  7. MySQL数据库干货分享！unsigned使用案例分析

    今天主要写一下unsigned的使用,进入正文前先分享一套博主觉得讲的很详细很实用的MySQL教程给大家 https://www.bilibili.com/video/BV1fx411X7BD 好了, ...

  8. Ionic5沉浸式状态栏 适配全面屏

    1. 在platforms/android/app/src/main目录中找到AndroidManifest.xml文件,修改文件中manifest → application → activity标 ...

  9. Java双刃剑之Unsafe类详解

    前一段时间在研究juc源码的时候,发现在很多工具类中都调用了一个Unsafe类中的方法,出于好奇就想要研究一下这个类到底有什么作用,于是先查阅了一些资料,一查不要紧,很多资料中对Unsafe的态度都是 ...

  10. 1053 Path of Equal Weight

    Given a non-empty tree with root R, and with weight W​i​​ assigned to each tree node T​i​​. The weig ...