Home  >  Article  >  Web Front-end  >  border-image in css style

border-image in css style

高洛峰
高洛峰Original
2017-02-28 13:49:511260browse

border-image-source property sets the path of the border image [none | dc0870658837139040642baa5555a380]

##

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
}

border-image-slice attribute image border offset inward [ d80b5def5ed1be6e26d91c2709f14170 | 42c97a047d75abc12b9b351eb8562711 ](1,4) ?fill

##
p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
}

border-image-width property sets the width of the image border [d82af2074b26fcfe177e947839b5d381|d80b5def5ed1be6e26d91c2709f14170 |42c97a047d75abc12b9b351eb8562711 | auto](1,4)

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
}

border-image-outset property sets the amount of the border image area beyond the border [d82af2074b26fcfe177e947839b5d381|d80b5def5ed1be6e26d91c2709f14170 ](1,4)

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
   border-image-outset: 27px 27px 27px 27px;
}

border-image-repeat property sets whether the image border should be repeated, rounded or stretched. )(1,2)

p {
   border: 20px solid #000;
   border-image-source: url(border.png);
   border-image-slice: 27,27,27,27;
   border-image-width: 27px 1 10% 27px;
   border-image-outset: 27px 27px 27px 27px;
   border-image-repeat: rounded;
   border-image: url(border.png) 27  rounded;
}


For more articles related to border-image in css style, please pay attention to the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn