一、定义：

  • 在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用

  • border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。例如：border-image：url（“1.png”） 167/20px round

二、用法

①border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。 如果值是"none"，或者，如果无法显示图像，边框样式会被使用。

②border-image -slice属性指定图像的边界向内偏移。此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。值默认的单位是px，不能使用小数

③border-image -width属性指定图像边界的宽度。

④border-image-outset用于指定在边框外部绘制 border-image-area 的量，设置边框图像与边框（border-image）的距离，默认为0

⑤ border-image-repeat 属性用于图像边界是否应重复（repeated：从边框的中间向两侧平铺，但不完整）、拉伸（stretched：拉伸显示在边框内，会变形）或铺满（rounded：完整的自适应显示在边框内，等比缩放，不会变形）。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>边框图片</title>

    <style>

        .box1{

            width: 400px;

            height: 400px;

            float: left;

            border: 20px solid #000;/* 必须先设置 */

            border-image: url("border.png") 26/20px stretch;

        }

        .box2{

            width: 400px;

            height: 400px;

            float: left;

            border: 20px solid #000;/* 必须先设置 */

            border-image: url("border.png") 26/20px round;

        }

        .box3{

            width: 400px;

            height: 400px;

            float: left;

            border: 20px solid #000;/* 必须先设置 */

            border-image: url("border.png") 26/20px repeat;

        }

    </style>

</head>

<body>

    <div class="box1">stretch(默认值)</div>

    <div class="box2">round</div>

    <div class="box3">repeat</div>

</body>

</html>

边框图片border-image的更多相关文章

  1. css3 border img 边框图片

    摘自http://www.html-js.com/article/CSS3-tutorial-css3borderimage-frame-image-Xiangjie-on border-image摘 ...

  2. 第 23 章 CSS3 边框图片效果

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

  3. Retina视网膜屏中CSS3边框图片像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

  4. CSS3之边框图片border-image

    CSS3中有关border的属性,还有很多,今天我将为大家介绍一个很好玩的属性——Border-image.有了CSS3之边框图片Border-image,我们可以轻松搞定圆角,轻松搞定很多之前难搞的 ...

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

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

  6. CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换

    边框圆角 border-radius 每个角可以设置两个值,x值.y值 border-top-left-radius:水平半径 垂直半径 border-radius:水平半径/垂直半径 border- ...

  7. 从零开始学 Web 之 CSS3（四）边框图片，过渡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 鼠标滑过图片添加边框图片无位移[xyytit]

    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  9. CSS3边框图片-像素虚边的问题

    虽然CSS3新增了这个功能,但是在W3school里面并没有给出具体详细的解释,还好网上不乏大神给你我们很全面的解释其中的原理-css3:border-image边框图像详解 边框图片的原理是四个角不 ...

  10. CSS学习笔记-边框图片等属性

      1.边框图片:        1.1含义:            告诉浏览器指定一张图片作为边框        1.2格式:             border-image-source:url ...

随机推荐

  1. Python3 MySQL

    首先安装pymysql  pip install pymysql 准备数据库:创建一个数据库testdb mysql实例: import pymysql #打开数据库连接,使用数据库所在的IP127. ...

  2. vue和react之间的区别

    1.Vue和React之间的区别 相同点: Vue和其他框架一样,都有组件开发和虚拟dom 都支持props进行父子组件之间的数据通信 都支持数据驱动视图,不直接操作真实dom 都支持服务器端的 渲染 ...

  3. 通过 Web Deploy 发布的配置

    罩着别人的配置弄了一下午,死活认证通不过,后来好不容易试出来,备忘. 服务端:安装IIS,启动管理程序,安装Web Deploy, 建立网站,建立IIS用户,进网站的权限管理里面给IIS用户授权. V ...

  4. 实战FFmpeg－－iOS平台使用FFmpeg将视频文件转换为YUV文件

    做播放器的开发这里面涉及的东西太多,我只能一步步往前走,慢慢深入.播放器播放视频采用的是渲染yuv文件.首先,要知道yuv文件是怎么转换得来的,其次,要知道怎么把视频文件保存为yuv文件.雷神的文章1 ...

  5. TableCache设置过小造成MyISAM频繁损坏 与 把table_cache适当调小mysql能更快地工作

    来源: 前些天说了一下如何修复损坏的MyISAM表,可惜只会修复并不能脱离被动的境地,只有查明了故障原因才会一劳永逸. 如果数据库服务非正常关闭(比如说进程被杀,服务器断电等等),并且此时恰好正在更新 ...

  6. Ubuntu 用户权限相关命令

    目标 用户 和 权限 的基本概念 用户管理 终端命令 组管理 终端命令 修改权限 终端命令 01. 用户 和 权限 的基本概念 1.1 基本概念 用户 是 Linux 系统工作中重要的一环,用户管理包 ...

  7. http状态码记录

    一些常见的状态码为: 200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解: 1xx(临时响应)表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明100 ...

  8. springboot2.1.3使用jdbcTemplate

    这里只是备忘一下使用方式,至于配置数据源信息不在此文中讲解,忘谅解. 1.  查询返回List<Long>数据集 (这里比如返回userId,long型) @Autowired@Quali ...

  9. 【转】VC和VS的区别

    各个版本之间的对应关系 使用windows平台搞开发时,下载第三方库时经常会遇到文件名以VCxx版本号命令,VC版本如何转换成对应的VS的版本呢,这里总结一下vc和vs的关系. Microsoft V ...

  10. tengine编译安装及nginx高并发内核参数优化

    Tengine Tengine介绍 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性. Tengine的性能和稳定性已经在大型的 ...