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. 鸿蒙运行报错：Failure[INSTALL_PARSE_FAILED_USESDK_ERROR] Error while Deploying HAP

    问题描述 近期,使用DevEco-Studio新建手机类型的工程,编译成功,发布到模拟器(鸿蒙P40)时出错,如下图: 原因分析 本地DevEco-Studio使用的SDK版本与设备(P40)不匹配导 ...

  2. 全网最详细的Linux命令系列-ls命令

    Linux开始必须要会的命令当属ls,在日常工作中用到ls命令时的频率是很多的,作为一个初学者,可能我只会或者顶多ls -l两种用法.但是ls其实是一个非常实用的指令,ls命令就是list的缩写,ls ...

  3. Web协议详解与抓包实战,高效解决网络难题

    无论你是前后端工程师,还是运维测试,如果想面试更高的职位,或者要站在更高的角度去理解技术业务架构,并能在问题出现时快速.高效地解决问题,Web 协议一定是你绕不过去的一道坎. 旨在帮助你对各种常用 W ...

  4. MySQL实战45讲,丁奇带你搞懂

    之前,你大概都是通过搜索别人的经验来解决问题.如果能够理解MySQL的工作原理,那么在遇到问题的时候,是不是就能更快地直戳问题的本质? 以实战中的常见问题为切入点,带你剖析现象背后的本质原因.为你串起 ...

  5. Spring Boot自动配置原理

    使用Spring Boot之后,一个整合了SpringMVC的WEB工程开发,变的无比简单,那些繁杂的配置都消失不见了,这 是如何做到的? 一切魔力的开始,都是从我们的main函数来的,所以我们再次来 ...

  6. 关于Maven中<packaging>产生的一些问题

    关于Maven中产生的一些问题 一.项目的打包类型 jar 默认的打包格式 war 打包成需要部署的项目 pom 父类型为pom类型 二. pom 简单来说,一个多模块项目通过一个父POM 引用一个或 ...

  7. 5. VUE 生命周期

    VUE 生命周期 帮助文档: https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE https://cn.vuejs.o ...

  8. 开坑：mysql相关问题

    一. 先过滤后连表和先连表后在mysql中选择的哪一种? 二. left join 和inner join使用场景有什么区别? 三. 第二个问题的衍生问题:left join中where 条件使用对n ...

  9. 一次ssh不能登陆问题

    看提示应该是进程数满了 ps -eLf | wc -l  查看当前进程数 [root@qc-app-16-63 containers]# ps -eLf | wc -l2625 查看允许最大进程数 s ...

  10. Kafka原理分析之基础篇

    原创文章,转载请标注.https://www.cnblogs.com/boycelee/p/14728638.html 一.Kafka二.解决问题异步处理应用解耦流量削峰三.特性读写效率网络传输并发能 ...