Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use the newly added features of css3 frame". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use the newly added features of css3 frame.

The new features added to the css3 frame are: border-radius, border-image, border-image-outset, border-image-repeat, border-image-slice, border-image-width and so on.

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

New features (properties) added to the border of css3

Property describes that the CSSborder-radius sets or retrieves objects using fillet borders.

Border-bottom-left-radius sets or retrieves the fillet border in the lower-left corner of the object. Provide 2 parameters, 2 parameters separated by spaces, each parameter allows to set 1 parameter value, the first parameter represents the horizontal radius, the second parameter represents the vertical radius, if the second parameter is omitted, then by default equal to the first parameter 3border-bottom-right-radius sets or retrieves the lower right corner fillet border of the object. 3border-top-left-radius defines the shape of the upper-left border. 3border-top-right-radius defines the shape of the upper-right border. 3border-image sets or retrieves the border style of an object to be filled with an image. 3border-image-outset specifies the amount by which the frame image exceeds the frame. 3border-image-repeat specifies whether the image frame should be repeated (repeated), stretched (stretch), or rounded (rounded). 3border-image-slice specifies the inward offset of the image frame. 3border-image-source specifies the image to be used instead of the border style set in the border-style property. 3border-image-width specifies the width of the image frame. 3box-decoration-break specifies that the inline element is wrapped 3box-shadow to add one or more shadows to the box. 3box-reflect sets or retrieves the reflection of an object 3

Border-image

The new border attribute in CSS3 expands the function of the original box model and makes the frame have the property of background picture. Previously, border had only width, color and style attributes.

Implement the border background picture property, usually using the padding and background properties for simulation, but this makes it more difficult to set the background of the box

Syntax format: this syntax is CSS abbreviated style

Border-image:

[source of border-image-source pictures]

Description:

Sets or retrieves the border style of the object using the image path.

Specifies the properties that an image uses to override the border-style border style. When border-image is none or the image is not visible, the border style effect defined by border-style is displayed.

The corresponding script feature is borderImageSource.

Value:

None: no background picture.

None: no background picture.

Specify the image using an absolute or relative address

Specify the image using an absolute or relative address

[border-image-slice segmentation method]

Description:

Sets or retrieves how the border background image of the object is split.

This attribute specifies that the image is separated from the top, right, bottom, and left directions, dividing the image into 4 corners, 4 edges and 9 middle areas, which are always transparent (that 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.

Specifies the width as a percentage Negative values are not allowed.

[

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

Description:

Sets or retrieves the border thickness of the object.

This property is used to specify how thick a border is to be used to hold the cropped image.

This attribute can be omitted and is defined by an external border-width.

The corresponding script feature is borderImageWidth.

Value:

Specifies the width with a length value Negative values are not allowed.

Specifies the width as a percentage Negative values are not allowed.

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

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

Note: the worthwhile size will not be added to the box model. Chrome will have a size of 3 pixels, and the size of other browsers border will still be 0.

/ [border-image-outset expansion method]

Description:

Sets or retrieves an extension of the border background image of the object.

This property is used to specify that the frame image is expanded outward by a defined value, that is, if the value is 10px, the image is extended outward on the original basis and then displayed by 10px.

The corresponding script feature is borderImageOutset.

Value:

Specifies the width with a length value Negative values are not allowed.

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

]

[border-image-repeat repeat mode]

Description:

Sets or retrieves how the border image of the object is tiled.

This property is used to specify how the background image of the border is filled. 0-2 parameter values can be defined, that is, horizontal and vertical directions. If the two values are the same, they can be merged into one, indicating that both the horizontal and vertical directions fill the border background image in the same way; if both values are stretch, you can omit it.

The corresponding script feature is borderImageOutset.

Value:

Stretch: specifies that the frame background image is filled by stretching.

Repeat: specifies that the border background image is tiled. When the picture hits the boundary, if it exceeds it, it will be truncated.

Round: specifies that the border background image is tiled. The picture will dynamically resize the picture according to the size of the frame until it is just enough to cover the entire frame. Only Firefox can see this effect when writing this document

Space: specifies that the border background image is tiled. The picture dynamically adjusts the spacing between the pictures according to the size of the frame until it is just enough to cover the entire frame. Writing this document is fashionable without a browser to see this effect.

New attribute instance for CSS3

1 、

Div {width:300px; height:300px; background:url (. / shuaige.jpg) no-repeat center; border-image-source:none;}

2 、

Div {width:300px; height:300px; background:url (. / shuaige.jpg) center no-repeat; border-image-source:url (. / border.png); / * Border Picture Properties * / border-image-width:27px;/* Border Picture width Properties * / border-image-slice:27;/* Border Image cutting Properties * / border-image-outset:0px / * Border Image extension attribute * / border-image-repeat:stretch;/* Border Picture repetition attribute * /}

3 、

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;/* sets the repetition mode to repeat * /}

4 、

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 / * set the repetition mode to round will zoom out or zoom out depending on the situation * /}

5 、

Div {width:300px; height:300px; background:url (. / shuaige.jpg) center no-repeat; border-image-source:url (. / border.png); / * Border Image Properties * / border-image-width:27px;/* Border Image width Properties * / border-image-slice:27 fill / * set the frame image background fill content section, the fifth cut content will be displayed * / border-image-outset:0px;/* frame image extension attribute * / border-image-repeat:stretch;/* frame image repetition attribute * /}

6 、

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;/* cut to 2 times the width will automatically scale * / border-image-outset:0px; border-image-repeat:stretch;}

7 、

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;/* cut to 3 times the width * / border-image-outset:0px; border-image-repeat:stretch;}

8 、

Div {width:300px; height:300px; background:url (. / shuaige.jpg) center no-repeat; border-image-source:url (. / border.png); size of border-image-width:27px; border-image-slice:27; border-image-outset:154px;/* 's outward expansion * / border-image-repeat:repeat } at this point, I believe you have a deeper understanding of "how to use the newly added features of the css3 frame". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.