CSS3 border effects

What is CSS#

CSS (abbreviation of Cascading Style Sheets), translated as "cascading style sheets" or "cascading style sheets", is referred to as style sheets.

The main purpose of CSS#

It is mainly used to set the appearance or style of HTML web pages. Appearance or style: the size, color, font of the text in the HTML web page, the background color and background image of the web page.

CSS3 Borders

CSS3 Borders#

With CSS3, you can create rounded borders, add shadows to rectangles, and use images to draw borders - without using design software such as PhotoShop.

You will learn the following border properties: border-radius, box-shadow, border-image.

1. Rounded border border-radius#

In CSS3, the border-radius property is used to create rounded corners:

1.1. border-radius syntax#

The basic writing method is as follows:

Set the upper left corner

border-top-left-radius:10px;

Set the upper right corner

border-top-right-radius:10px;

Set the lower left corner

border-bottom-left-radius:10px;

Set the lower left corner

border-bottom-right-radius:10px;

Shorthand setting of four corners

The execution order is as follows: upper left-upper right-lower right-lower left

border-radius:1px 2px 3px 4px;

Set the four corner values ​​to be uniform

border-radius:10px;

Support percentage

border-radius:100%;

Support em

border-radius:2em;

Supported operations

border-radius:30px/30px; /*支持加和除其余的不支持*/

JavaScript Syntax

document.getElementsByTagName("div")[0].style.borderRadius = "25px";

1.2 Browser compatibility#

-webkit: represents Webkit-based browsers, such as Chrome and Safari, private attributes or kernel identification codes.

-webkit-border-radius:5px; -moz: represents the private attributes or kernel identification code of the Firefox browser.

-moz-border-radius:5px;

ms represents the IE browser's private attribute or kernel identification code.

-ms-border-radius: 5px;

-o- represents the private attributes or kernel identification code of Opera browser.

-o-border-radius: 5px;

IE9+, Firefox 4+, Chrome, Safari 5+, and Opera support the border-radius property.

border-radius:10px;

Summarize

The above is the CSS3 border effect that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!