border-image-width in css
Question
This is how MDN explains border-image-width .
The border-image-width CSS property defines the width of the border image by defining inward offsets from the border edges. If the border-image-width is greater than the border-width, then the border image extends beyond the padding (and/or content) edge.
What it does not tell is what will happen if border-image-width is less than border-width ?
I did an example on it. Ran it on chrome 56. Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Image</title>
<style>
p.checkBorderImageWidth{
border: 40px solid black;
width:500px;
border-image-source: url("1.png");
/* Note that now border-image-slice defaults to 100% */
border-image-width: 10px;
outline: 1px solid black;
}
</style>
</head>
<body>
<p class="checkBorderImageWidth">Hi this is just a demo</p>
</body>
</html>
Border image used is :
Result is:
So, as you see the solid black border is hidden though it is 40px and boder-image-width is 10px. Can anyone explain it ?
1 answers
solution1
3 ACCPTED 2017-02-16 14:43:05
The border image is used instead of the 'normal' border:
source: https://www.w3schools.com/cssref/css3_pr_border-image.asp
The
border-imageproperty allows you to specify an image to be used instead of the normal border around an element.
Your citation explains that the border image will cover the padding and eventually content of the container if border-image-width > border-width .
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Border Image</title>
<style>
p.checkBorderImageWidth{
border: 40px solid black;
width:500px;
border-image-source: url("1.png");
/* Note that now border-image-slice defaults to 100% */
border-image-width: 10px;
outline: 1px solid black;
}
p.checkBorderImageWidth2{
border: 100px solid black;
width:500px;
border-image-source: url("1.png");
/* Note that now border-image-slice defaults to 100% */
border-image-width: 30px;
padding: 5px;
outline: 1px solid black;
}
</style>
</head>
<body>
<p class="checkBorderImageWidth">Hi this is just a demo</p>
<p class="checkBorderImageWidth2">The border covers the text.</p>
</body>
</html>
Here the border covers the text:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.