Home > Article > Web Front-end > css3 how to set image as border around element

css3 how to set image as border around element

藏色散人Original: 2018-12-01 16:36:534354browse

How to set an image as a border around an element in css3: First create an HTML sample file; then create some p elements in the body; finally set the image as a border around the element through the border-image attribute in css3 Just the border.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

In the process of web design, using css3 image border attributes can greatly improve the overall aesthetics of the web page and enrich the page content. Then the image border attribute in CSS3 is the border-image attribute.

Below we will introduce to you the usage of the border-image attribute in CSS3 through specific code examples.

That is, specifying the image as a border around the element.

The code is as follows:

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        #borderimg1 {
            width: 600px;
            border: 15px solid transparent;
            padding: 10px;
            -webkit-border-image: url("/test/img/19.png") 30 round;
            border-image: url("/test/img/19.png")  60 round;
        }
        #borderimg2 {
            width: 600px;
            border: 15px solid transparent;
            padding: 10px;
            -webkit-border-image: url("/test/img/19.png")  30 stretch;
        }
    </style>

</head>
<body>
<p>border-image 边框图像属性,将图片规定为包围 div 元素的边框：</p>
<p id="borderimg1">这里图像的中间部分被重复以创建边界。</p>
<p id="borderimg2">这里图像的中间部分被拉伸以创建边界。</p>
</body>
</html>

The original image here is as follows:

css3 how to set image as border around element

Specify this image as required around the element Border, the effect is as follows:

css3 how to set image as border around element

border-image attribute allows you to use an image or CSS gradient shape as the border of an element.

The border-image attribute is an abbreviated attribute, used to set the following attributes:

border-image-source /*用于指定要用于绘制边框的图像的位置*/
border-image-slice /*图像边界向内偏移*/
border-image-width /*图像边界的宽度*/
border-image-outset /*用于指定在边框外部绘制 border-image-area 的量*/
border-image-repeat /*用于设置图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）。*/

Recommended learning: "CSS3 Tutorial"

This article This is an introduction to how to use css3 attributes to specify an image as a border around an element. It is also very simple and easy to understand. I hope it will be helpful to friends in need.

The above is the detailed content of css3 how to set image as border around element. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 html border

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

Previous article：How many types of css border styles are there?Next article：How many types of css border styles are there?

See more

css3 how to set image as border around element

Related articles