简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> CSS Tutorial> body text

border-image in css style

高洛峰
Release： 2017-02-28 13:49:51
Original
1233 people have browsed it

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

##

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

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

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

border-image-width property sets the width of the image border [ | | | 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; }
Copy after login

border-image-outset property sets the amount of the border image area beyond the border [ | ](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; }
Copy after login

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; }
Copy after login


For more articles related to border-image in css style, please pay attention to the PHP Chinese website!
Related labels：
css border-image
source：php.cn
Previous article：Misunderstandings in using CSS and HTML Next article：The difference between nth-child and nth-of-type in CSS3
Statement of this Website
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
Latest Articles by Author
Latest Issues
Curl bottom edge of div inwards using CSS I want to bend the bottom edge of this rectangular div/background using CSS, so the result...
From 2023-10-23 19:55:32
0
2
335
Why does css border-radius cause elements to disappear in this minimal Angular Material Sidenav component? (demo available) This is about AngularMaterialSidenav component. In the code below, when I increase the bor...
From 2023-09-15 20:15:02
0
1
730
Add a line from the end of the title text to the end of the container I use this CSS to draw a line from the end of the title text to the end of the container: ...
From 2023-09-15 19:42:56
0
1
207
CSS: Remove drop shadow from div inside Vuetify dialog with drop shadow I have a dialog with a triangle added using CSS on a div. But the CSS trick is that part o...
From 2023-09-13 19:57:28
0
1
210
The difference between CSS attribute selectors and pseudo-elements for input tags **Inside the CSS file: **input[type="text"]{border:2pxsolidred;}input::placehold...
From 2023-09-10 15:43:12
0
1
184
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！