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. [Azure DevOps] 如何安装并配置 Build Agent

    1. 编译服务器 在 Azure Pipelines 中至少需要一个编译服务器的 Agent 才能编译代码或发布软件.Azure DevOps 本身已经提供了一个 Agent,但出于各种理由(需要特殊 ...

  2. OO第二单元——电梯作业总结

    前言 本单元作业主要以设计电梯来实现多线程编程.本章主要学习了如何使用多线程以及如何确保多线程安全,从电梯的调度策略中学会了如何简单地使用synchronized锁来控制线程安全. 首先,明确锁的两个 ...

  3. 2018年block3学习计划

    还是要给自己制定一个block的计划,希望自己的技术能有更进一步的提升 1. 算法/数学 随着学习的进一步深入,愈发认识到了算法的重要性,这个block给自己定下的计划就是 1)把introducti ...

  4. django-数据库的增删改查操作

    django-数据库的增删改查操作 1.添加用户记录 def login(request): 增加用户记录 使用save()方法来增加记录 username = UserInfo(username=' ...

  5. Spring（一）简介和配置

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

  6. LNMP架构上线动态网站

    第一步,一键安装所需程序 yum install -y nginx php php-mysql php-fpm mariadb-server 第二步,修改Nginx配置文件/etc/nginx/ngi ...

  7. 0702-计算机视觉工具包torchvision

    0702-计算机视觉工具包torchvision 目录 一.torchvision 概述 二.通过 torchvision 加载模型 三.通过 torchvision 加载并处理数据集 四.通过 to ...

  8. 858. Mirror Reflection

    There is a special square room with mirrors on each of the four walls.  Except for the southwest cor ...

  9. Servlet与Netty横向对比

    为什么要把这两个看起来不是很搭的东西放在一起对比呢?首先它们两个都是网络编程框架和规范,而且通过我的观察,从API的设计.生命周期方法.处理流程等等方面,他们确实有太多相似的地方了,如果想要深入地学习 ...

  10. Python实现简单HTTP服务器

    Python实现简单HTTP服务器(一) 一.返回固定内容 复制代码 coding:utf-8 import socket from multiprocessing import Process de ...