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

This article mainly shows you the "what are the new border attributes in css3", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the new border attributes in css3" this article.

Css3 new border properties: 1, "border-image", this attribute is the shorthand attribute used to set the element border style; 2, "border-radius", this attribute is used to set the element four corners of the fillet style; 3, "box-shadow", this attribute is used to set the element one or more drop-down shadow box.

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

In css3, new border properties are: border-image, border-radius, and box-shadow properties.

1 、 border-image

The border-image property is an abbreviated property that sets the following properties:

Examples are as follows:

Div {border:15px solid transparent;width:300px;padding:10px 20px;} # round {- moz-border-image:url (/ i/border.png) 30 30 round;/* Old Firefox * /-webkit-border-image:url (/ i/border.png) 30 30 round;/* Safari and Chrome * /-o-border-image:url (/ i/border.png) 30 30 round;/* Opera * / border-image:url (/ i/border.png) 30 30 round } # stretch {- moz-border-image:url (/ i/border.png) 30 30 stretch;/* Old Firefox * /-webkit-border-image:url (/ i/border.png) 30 30 stretch;/* Safari and Chrome * /-o-border-image:url (/ i/border.png) 30 30 stretch;/* Opera * / border-image:url (/ i/border.png) 30 30 stretch;} here, the picture covers the entire frame.

Here, the picture is stretched to fill the area.

This is the picture we used:

Note: the border-image attribute is not supported by Internet Explorer.

The border-image property specifies the picture to use as a border.

Output result:

2 、 border-radius

The border-radius property is an abbreviated property that sets the fillet style for the four corners. The syntax is as follows:

Border-radius: 1-4 length |% / 1-4 length |%

Examples are as follows:

Div {text-align:center;border:2px solid # a1a1a1 / paddingbackground:#dddddd;width:350px;border-radius:25px;-moz-border-radius:25px; 10px 40px; the old Firefox * /} border-radius attribute allows you to add fillets to the element.

Output result:

3 、 box-shadow

The box-shadow property can set one or more drop-down shadow boxes. The syntax is as follows:

Box-shadow: h-shadow v-shadow blur spread color inset

Examples are as follows:

123 div {width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px # 888888;}

Output result:

These are all the contents of this article entitled "what are the new border attributes in css3?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.