参考链接：
https://segmentfault.com/a/1190000010969367
注：只有一个图片路径的时候必须要有border-image-width属性属性配合使用，要不图片展示不出来
border-image:url() 20 repeat stretch
这个写法包含了三个属性知识点：
1、border-image-source :边框应用图片的路径,值为相对路径/绝对路径/none
2、border-image-slice: 边框应用图片的截取大小， 值是 普通数值/百分比
3、border-image-repeat： 边框应用图片是否重复。值是round/stretch/repeat
值为o-2个参数
[list]
0个参数：默认是stretch 拉伸
1个参数 指的是水平垂直都是这个规则
2个参数 round stretch 指的是水平方向上是平铺，垂直方向上市拉伸
round 平铺 ：会凑数 适当拉伸
repeat 重复：不会凑数，有可能图片会只有一半
另外两个属性是border-image-width border-image-outset
border-image-width:指的是边框应用图片的宽是多少，值是lenthpx/百分比precentage/number 一般是需要被应用的border的倍数/auto 自动 采用border-image-slice的值
border-image-outset 1.5rem 指的是 需要在外部区域border 向外延展1.5rem 再粘贴应用图片
border-image-width 应该在border-image-slice 和 border-image-repeat 中间 用/隔开
border-image-outset 紧跟着border-image-width 也需要用/隔开
[/list]
完整写法 border-image: url() 20 /1.5rem/1.5rem/ repeat stretch
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>border-image-slice_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test2 {
width:800px;
height: 300px;
border-width: 50px 100px;
border-style: solid;
border-color: orange;
border-image:url(https://www.baidu.com/img/bd_logo1.png) 50% round;
border-image-width: 25px;
border-image-outset: 25px;
}
</style>
</head>
<body>
<div class="test2">保留裁减后的中间区域</div>
</body>
</html>
分享到：
相关推荐
本文将详细介绍如何在QT中利用`border-image`属性来实现类似Android 9patch的效果。 9patch是Android平台上的一个特殊图像格式，它允许开发者创建可拉伸的图片，尤其适用于按钮、背景等需要自适应大小的UI元素。9...
`border-image` 是 CSS3 中的一项强大功能，它允许我们使用图像来定义边框，从而实现各种复杂的边框样式，包括相册框效果。本文将详细讲解如何利用 `border-image` 实现相册框，并探讨其相关知识。 首先，我们要...
总结一下，`border-image`是CSS3中的一个重要特性，它提供了丰富的边框设计选项，通过组合使用`border-image-source`、`border-image-slice`、`border-image-width`、`border-image-outset`和`border-image-repeat`...
border-image: <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> ``` 1. **`border-image-...
在iOS设备上，有时开发者会遇到`border-image`样式不生效的问题，这通常是由于浏览器的兼容性或特定的渲染机制导致的。`border-image`是一个非常有用CSS3属性，允许我们使用图像来创建复杂的边框效果，而不仅仅是...
【CSS3图片边框border-image】是CSS3中引入的一项创新特性，允许开发者使用图像作为元素的边框，为网页设计增添了丰富的视觉效果。传统的边框样式如双线、虚线、圆点线等虽然简单易用，但相对单一。border-image属性...
在CSS世界中，`border-radius`属性是一个非常重要的特性，它允许我们为元素添加圆角效果，从而使得设计更加精致和现代。然而，在实际开发中，我们可能会遇到`border-radius`失效的问题，导致元素的边角无法按照预期...
本文将深入解析`border-image`的相关属性及其用法。 首先，`border-image-source`属性用于指定边框图像的源，即边框图像的URL。例如： ```css div { border: 20px solid #000; border-image-source: url(border....
【CSS3 border-image边框图像详解】 在CSS3中，`border-image`是一个非常有用的属性，它允许开发者为元素的边框添加复杂的背景图像，从而创建出独特且富有创意的边框效果。这个属性可以替代传统的`border-style`，...
它可以配合`border-image-source`、`border-image-slice`等属性一起使用。 7. **边框动画**：结合CSS的`transition`或`animation`属性，可以实现边框效果的动态变化，如边框颜色渐变、宽度变化等。 8. **边框阴影*...
CSS3的`border-image`属性是一个强大的特性，用于创建复杂的边框样式，它允许开发者使用图像作为边框，而非单一的颜色或渐变。在许多情况下，`border-image`可以帮助实现更具设计感和个性化的界面元素。这篇教程将...
CSS3中的box-sizing（content-box与border-box） CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，有两种方式： content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border...
在探讨“table中的border-collapse属性”这一主题时，我们深入剖析了CSS中这一关键属性的运作机制及其对表格布局的影响。border-collapse属性是CSS中用于控制表格边框表现的重要属性，它决定了表格单元格（td）之间...
eborder-client-win_2_11
在CSS3中，`border-image`是一个非常强大的特性，它允许开发者使用图像来定义边框样式，从而创造出更具视觉吸引力的界面。这个属性通过将图片进行切割和重复，然后将其应用到元素的边框上，提供了更为灵活的边框设计...
在CSS3中，`border-radius`属性是一个非常重要的特性，它允许我们为元素的边框添加圆角，使得设计更加丰富和美观。然而，这个特性在早期版本的Internet Explorer（尤其是IE7和IE8）中并不支持。为了解决这个问题，...
CSS3 中的 border-radius 属性可以生成圆角边框，无需使用图片背景图案，从而简化了网页设计的过程。下面对 border-radius 属性进行详细介绍。 一、border-radius 属性 border-radius 属性是 CSS3 中用于生成圆角...