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

This article mainly introduces how to use the border frame attribute in CSS3. It is very detailed and has certain reference value. If you are interested, you must finish it.

The border property of CSS3 can create a rounded box, or you can shadow the box and beautify the box with pictures.

Border-radius can fillet elements.

As follows, a div element:

Border-radius can fillet elements.

Let's style it a little bit and set its border-radius to 15px:

.box {

Width: 284px

Height: 28px

Line-height: 28px

Text-align: center

Color: # fff

Font-size: 14px

Background: # 999

Border:2px solid # 333

Border-radius: 15px

View the effect in the browser:

New feature of CSS3-- border Border property

Border-radius can also set angles for its four corners, and the four values represent upper left, upper right, lower right, and lower left in turn:

Border-radius: 15px 15px 0px 0px

New feature of CSS3-- border Border property

Box-shadow can set border shadows for elements. The properties set by box-shadow are as follows:

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

The position of the h-shadow horizontal shadow, which can be negative.

The position of the v-shadow vertical shadow, which can be negative.

Blur blur distance.

The size of the spread shadow.

The color of the color shadow.

Inset changes external shadows (outset) to internal shadows.

The above h-shadow and v-shadow must be set, and the rest can be set as needed.

Let's shadow the div element above:

Css style:

.box {

Width: 284px

Height: 100px

Background: # f60

Box-shadow: 10px 10px 5px # ccc

View the effect in the browser:

New feature of CSS3-- border Border property

Border-image uses pictures to set borders.

As follows:

We first set the border color of the div element to transparent, and then use the picture to set the border:

.box {

Width: 284px

Height: 100px

Border:15px solid transparent

Width:300px

Padding:10px 20px

-webkit-border-image:url (images/border.png) 30 30 round; / * Safari 5 * /

-o-border-image:url (images/border.png) 30 30 round; / * Opera * /

Border-image:url (images/border.png) 30 30 round

Take a look at the effect:

Children's boots may not understand why attributes are preceded by prefixes such as-webkit- and-o -. This is because many browsers do not support the new features of CSS, so these proprietary prefixes are written to be compatible with browsers.

The above is all the content of the article "how to use the border border attribute in CSS3". Thank you for reading! Hope to share the content to help you, more related 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.