border-image-slice

在此页

句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

border-image-slice CSS property divides the image specified by border-image-source into regions. These regions form the components of an element's border image .

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

The slicing process creates nine regions in total: four corners, four edges, and a middle region. Four slice lines, set a given distance from their respective sides, control the size of the regions.

The above diagram illustrates the location of each region.

Zones 1-4 are corner regions . Each one is used a single time to form the corners of the final border image.
Zones 5-8 are edge regions . These are repeated, scaled, or otherwise modified in the final border image to match the dimensions of the element.
Zone 9 is the middle region . It is discarded by default, but is used like a background image if the keyword fill 有设置。

border-image-repeat , border-image-width ，和 border-image-outset properties determine how these regions are used to form the final border image.

句法

/* All sides */
border-image-slice: 30%;
/* vertical | horizontal */
border-image-slice: 10% 30%;
/* top | horizontal | bottom */
border-image-slice: 30 30% 45;
/* top | right | bottom | left */
border-image-slice: 7 12 14 5;
/* Using the `fill` keyword */
border-image-slice: 10% fill 7 12;
/* Global values */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

border-image-slice property may be specified using one to four <number-percentage> values to represent the position of each image slice. Negative values are invalid; values greater than their corresponding dimension are clamped to 100% .

When one position is specified, it creates all four slices at the same distance from their respective sides.
When two positions are specified, the first value creates slices measured from the top and bottom , the second creates slices measured from the left and right .
When three positions are specified, the first value creates a slice measured from the top , the second creates slices measured from the left and right , the third creates a slice measured from the bottom .
When four positions are specified, they create slices measured from the top , right , bottom ，和 left in that order (clockwise).

可选 fill value, if used, can be placed anywhere in the declaration.

值

<number>: Represents an edge offset in pixels for raster images and coordinates for vector images. For vector images, the number is relative to the element's size, not the size of the source image, so percentages are generally preferable in these cases.
<percentage>
fill: Preserves the middle image region and displays it like a background image, but stacked above the actual background . Its width and height are sized to match the top and left image regions, respectively.

形式定义

初始值	`100%`
适用于	all elements, except internal table elements when `border-collapse` is `collapse` . It also applies to `::first-letter` .
继承	no
百分比	refer to the size of the border image
计算值	one to four percentage(s) (as specified) or absolute length(s), plus the keyword `fill` if specified
动画类型	by computed value type

形式句法

<number-percentage>{1,4} && fill?where 
<number-percentage> = <number> | <percentage>

范例

Adjustable border width and slice

The folowing example shows a simple <div> with a border image set on it. The source image for the borders is as follows:

nice multi-colored diamonds

The diamonds are 30px across, therefore setting 30 pixels as the value for both border-width and border-image-slice will get you complete and fairly crisp diamonds in your border:

border-width: 30px;
border-image-slice: 30;

These are the default values we have used in this example. However, we have also provided two sliders to allow you to dynamically change the values of the above two properties, allowing you to appreciate the effect they have:

border-image-slice Changes the size of the image slice sampled for use in each border and border corner (and the content area, if the fill keyword is used) — varying this away from 30 causes the border to look somewhat irregular, but can have some interesting effects.

border-width : Changes the width of the border. The sampled image size is scaled to fit inside the border, which means that if the width is bigger than the slice, the image can start to look somewhat pixellated (unless of course you use an SVG image).

HTML

<div class="wrapper">
  <div></div>
</div>
<ul>
  <li>
    <label for="width">slide to adjust <code>border-width</code></label>
    <input type="range" min="10" max="45" id="width">
    <output id="width-output">30px</output>
  </li>
  <li>
    <label for="slice">slide to adjust <code>border-image-slice</code></label>
    <input type="range" min="10" max="45" id="slice">
    <output id="slice-output">30</output>
  </li>
</ul>

CSS

.wrapper {
  width: 400px;
  height: 300px;
}
div > div {
  width: 300px;
  height: 200px;
  border-width: 30px;
  border-style: solid;
  border-image: url(https://interactive-examples.mdn.mozilla.net/media/examples/border-diamonds.png);
  border-image-slice: 30;
  border-image-repeat: round;
}
li {
  display: flex;
  place-content: center;
}

JavaScript

const widthSlider = document.getElementById('width');
const sliceSlider = document.getElementById('slice');
const widthOutput = document.getElementById('width-output');
const sliceOutput = document.getElementById('slice-output');
const divElem = document.querySelector('div > div');
widthSlider.addEventListener('input', () => {
  const newValue = widthSlider.value + 'px';
  divElem.style.borderWidth = newValue;
  widthOutput.textContent = newValue;
})
sliceSlider.addEventListener('input', () => {
  const newValue = sliceSlider.value;
  divElem.style.borderImageSlice = newValue;
  sliceOutput.textContent = newValue;
})

结果

规范

规范	状态	注释
CSS Backgrounds and Borders Module Level 3 The definition of 'border-image-slice' in that specification.	候选推荐	Initial defintion

浏览器兼容性

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`border-image-slice`	Chrome 完整支持 15	Edge 完整支持 12	Firefox 完整支持 15 注意事项完整支持 15 注意事项注意事项 Small SVGs are incorrectly stretched, because percentages in `border-image-slice` are computed to integers instead of floats ( bug 1284797 ). 注意事项 Until Firefox 47, SVGs without viewport were not sliced correctly ( bug 619500 ). 注意事项 From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched ( bug 1264809 ). 注意事项 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled ( bug 1290782 ).	IE 完整支持 11	Opera 完整支持 15	Safari 完整支持 6	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 15 注意事项完整支持 15 注意事项注意事项 Small SVGs are incorrectly stretched, because percentages in `border-image-slice` are computed to integers instead of floats ( bug 1284797 ). 注意事项 Until Firefox 47, SVGs without viewport were not sliced correctly ( bug 619500 ). 注意事项 From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched ( bug 1264809 ). 注意事项 Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled ( bug 1290782 ).	Opera Android 完整支持 14	Safari iOS 完整支持 6	Samsung Internet Android 完整支持 1.0

图例

完整支持
见实现注意事项。
要求使用供应商前缀或不同名称。

另请参阅

Illustrated description of the 1-to-4-value syntax

元数据

最后修改： Aug 3, 2020

在此页

句法

值