Home > Article > Web Front-end > What are the new features of css3 borders?

What are the new features of css3 borders?

青灯夜游Original: 2021-12-14 18:03:341687browse

The newly added features of css3 border include: border-radius, border-image, border-image-outset, border-image-repeat, border-image-slice, border-image-width, etc.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Newly added features (properties) of css3 borders

Properties	Description	CSS
border-radius	Sets or retrieves the rounded border of an object.
border-bottom-left-radius	Sets or retrieves the lower left corner rounded border of the object. Provide 2 parameters, separated by spaces. Each parameter is allowed to set 1 parameter value. The first parameter represents the horizontal radius, and the second parameter represents the vertical radius. If the second parameter is omitted, it defaults to the 1st parameter. Parameters	3
border-bottom-right-radius	Set or retrieve the rounded border of the lower right corner of the object.	3
border-top-left-radius	Define the shape of the upper left border.	3
border-top-right-radius	Define the shape of the upper right border.	3
border-image	Sets or retrieves the object's border style to fill with an image.	3
border-image-outset	Specifies the amount by which the border image exceeds the border.	3
border-image-repeat	Specifies whether the image border should be repeated, stretched, or covered ( rounded).	3
border-image-slice	Specifies the inward offset of the image border.	3
border-image-source	Specifies the image to be used in place of the border style set in the border-style property.	3
border-image-width	Specifies the width of the image border.	3
box-decoration-break	Specifies that inline elements are broken	3
box-shadow	Add one or more shadows to the box.	3
box-reflect	Sets or retrieves the reflection of an object	3

border-image

The new border attribute in CSS3 expands the functionality of the original box model and enables the border to have background image attributes. Previously, border only had width, color and style attributes.

To implement border background image attributes, padding and background attributes are usually used for simulation, but this increases the difficulty of setting the background of the box

Grammar format: The syntax is CSS Abbreviation style 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Description:

Set or retrieve the border style of an object using an image path.

Specify an image to be used to replace the border-style border style attribute. When border-image is none or the image is invisible, the border style effect defined by border-style will be displayed. The corresponding script feature is borderImageSource. Value:

　　　 none: No background image.

None: No background image.

　　　9bb6a7d109b3f2bf35f7e2e9bd87f98a: Specify the image using an absolute or relative address.

[ border-image-slice segmentation method ]

Description:

This attribute specifies to separate the image from the top, right, bottom, and left directions. The image is divided into 4 corners, 4 sides and a middle area, a total of 9 parts. The middle area is always transparent (that is, there is no image filling) ), unless the keyword fill is added. The corresponding script feature is borderImageSlice.

Value: 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　：Specify the width with a floating point number. Negative values are not allowed.

　　　e4e92d3c127c3888ce8ee7f736f89c64: Specify the width as a percentage. Negative values are not allowed.

[

/ [ border-image-width border width]? |

Description:

Set or retrieve the border thickness of the object. This attribute is used to specify how thick the border is to be used to carry the cropped image.

　　　This attribute can be omitted and is defined by the external border-width. The corresponding script feature is borderImageWidth. Value:

　　　d82af2074b26fcfe177e947839b5d381: Use the length value to specify the width. Negative values are not allowed.

　　　42c97a047d75abc12b9b351eb8562711: Specify the width as a percentage. Negative values are not allowed.

　　　d80b5def5ed1be6e26d91c2709f14170: Use a floating point number to specify the width. Negative values are not allowed.

　　Auto: If the auto value is set, border-image-width takes the same value as border-image-slice.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 should will need to be added to the box model. Chrome will have a size of 3 pixels, and the border size of other browsers will still be 0 |

/ [border-image-outset extension method]

Description:

Set or retrieve the background diagram of the object of the object.

This attribute is used to specify the value defined by the outward expansion of the border image. That is, if the value is 10px, the image will be extended 10px outward on the original basis before displaying.

The corresponding script feature is borderImageOutset.

Value:

　　　d82af2074b26fcfe177e947839b5d381: Specify the width with a length value. Negative values are not allowed.

　　　d80b5def5ed1be6e26d91c2709f14170: Use a floating point number to specify the width. Negative values are not allowed.

]

　[border-image-repeat repeat mode]

Description:

　　　This attribute is used to specify the filling method of the border background image. 0-2 parameter values can be defined, namely horizontal and vertical directions. If the two values are the same, they can be merged into one, indicating that the border background image is filled in the same way in both horizontal and vertical directions; if both values are stretch, they can be omitted.

The corresponding script feature is borderImageOutset.

　　　 Stretch: Specify the background diagram of the frame with stretching method.

Repeat: Specify the tiling method to fill the border background image. When the image hits the boundary, it will be truncated if it exceeds it.

Round: Specify a tiling method to fill the border background image. The image will dynamically adjust its size according to the size of the border until it just fits the entire border. At the time of writing this document, this effect can only be seen in Firefox

Space: Specifies a tiling method to fill the border background image. The picture will dynamically adjust the spacing between the pictures according to the size of the border until it can exactly cover the entire border. At the time of writing this document, no browser can see this effect

CSS3 New Property Example

##1、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) no-repeat center  ;
        border-image-source:none;
    }
</style>
</head>
<body>
    <div></div>
</body>

2、

<style>
div{
    width:300px;
    height:300px;
    background:url(./shuaige.jpg) center no-repeat ;
    border-image-source:url(./border.png);/*边框图片属性*/
    border-image-width:27px;/*边框图片宽度属性*/
    border-image-slice:27;/*边框图片切割属性*/
    border-image-outset:0px;/*边框图片扩展属性*/
    border-image-repeat:stretch;/*边框图片重复属性*/
}
</style>
</head>
<body>
    <div>
    </div>
</body>

<style>
div{
    width:300px;
    height:300px;
    background:url(shuaige.jpg) no-repeat center;
    border-image-source:url(border.png);
    border-image-width:27px;
    border-image-slice:27;
    border-image-outset:0px;
    border-image-repeat:repeat;/*设定重复方式为重复*/
}
</style>
</head>
<body>
    <div>
    </div>
</body>

<style>
            div{
                width:300px;
                height:300px;
                background:url(shuaige.jpg) no-repeat center;
                border-image-source:url(border.png);
                border-image-width:27px;
                border-image-slice:27;
                border-image-outset:0px;
                border-image-repeat:round;/*设定重复方式为round   会看情况进行缩放或缩小*/
            }
        </style>
    </head>
    <body>
        <div>
        </div>
    </body>

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);/*边框图片属性*/
        border-image-width:27px;/*边框图片宽度属性*/
        border-image-slice:27 fill;
        /*设定边框图片背景填充内容部分,会显示第5块切割的内容*/
        border-image-outset:0px;/*边框图片扩展属性*/
        border-image-repeat:stretch;/*边框图片重复属性*/
    }
</style>
</head>
<body>
    <div>
    </div>
</body>

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:54;/*切割为宽度的2倍   会自动缩放*/
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

7、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:81;/*切割为宽度的3倍*/
        border-image-outset:0px;
        border-image-repeat:stretch;
    }
</style>
</head>
<body>
<div>
</div>
</body>

8、

<style>
    div{
        width:300px;
        height:300px;
        background:url(./shuaige.jpg) center no-repeat ;
        border-image-source:url(./border.png);
        border-image-width:27px;
        border-image-slice:27;
        border-image-outset:154px;/*向外扩展的大小*/
        border-image-repeat:repeat;
    }
</style>
</head>
<body>
<div>
</div>
</body>

（Learning video sharing: css video tutorial

)

The above is the detailed content of What are the new features of css3 borders?. For more information, please follow other related articles on the PHP Chinese website!

html5 firefox css chrome css3 auto break Length number 对象盒子模型 padding border background

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：Are gradients new to css3?Next article：Are gradients new to css3?

See more

What are the new features of css3 borders?

Related articles