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. 连续函数离散化-以SOGI为例

    0. 引言 0.1 本文内容 基于SOGI函数,将s域传递函数转换为离散的z域函数,并以m语言形式进行实现,在simulink中封装为m-function并进行验证 0.2 学到什么 离散化方法 函数 ...

  2. 201871030103-陈荟茹 实验二 个人项目―《D{0-1}KP问题》项目报告

    项目 内容 课程班级博客链接 班级博客链接 这个作业要求链接 作业要求链接 我的课程学习目标 1.理解掌握软件设计的过程中的各个环节2.掌握github的使用,将自己的项目上传至githu中 这个作业 ...

  3. IP Networks UVA - 1590

     Alex is administrator of IP networks. His clients have a bunch of individual IP addresses and he de ...

  4. Day05_24_继承

    继承 什么是继承? 继承本质上是对某一批类的抽象,从而实现对现实世界更好的建模.继承是类和类之间的一种关系,除此之外类和类之间的关系还有依赖.组合.聚合等. 继承就是子类(派生类)继承父类(基类)的特 ...

  5. .NET RulesEngine（规则引擎）

    一次偶然的机会,让我拿出RulesEngine去完成一个业务,对于业务来说主要是完成一个可伸缩性(不确定的类型,以及不确定的条件,条件的变动可能是持续增加修改的)的业务判断.比如说完成一个成就系统,管 ...

  6. 《机器学习Python实现_10_02_集成学习_boosting_adaboost分类器实现》

    一.简介 adaboost是一种boosting方法,它的要点包括如下两方面: 1.模型生成 每一个基分类器会基于上一轮分类器在训练集上的表现,对样本做权重调整,使得错分样本的权重增加,正确分类的样本 ...

  7. 硬件篇-03-SLAM移动底盘电气设计

      最近因为在忙毕设,专栏已经1个多月没更,对于托更我很抱歉.不过这几周真的没什么时间,Rick&Morty的最新集我到现在都还没看哈哈.     现在毕设已经搞得差不多了,水专栏文章的快乐生 ...

  8. Shell-日志按天切割

    1.创建shell脚本: #!/bin/bash apphome=/apppath if [ ! -d $apphome ]; then exit 0 fi cp $apphome/app.log $ ...

  9. SpringCloud之Ribbon负载均衡策略

    Spring Cloud 微服务架构学习记录与示例 一.认识Ribbon 首先咱们需要认识下负载均衡,一般分为服务器端负载和客户端负载均衡. 服务器端负载均衡:比如Nginx.F5,请求达到服务器后由 ...

  10. hdu1978 简单记忆化搜索

    题意: How many ways Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...