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

This article mainly introduces what the new attributes of css3 are, which is very detailed and has a certain reference value. Friends who are interested must finish reading it!

1. Add border attributes to css3

1. Border-color of the new attribute of css3: set multiple colors for the border.

P

{

Border-style:solid

Border-color:#ff0000#0000ff

}

As a digression here, it is important to note that the "border-width" attribute will not work if used alone. First use the "border-style" property to set the border.

2. Border-image of the new attribute of css3: picture frame

The border-image property of css3 is to use pictures to create borders

Div

{

-webkit-border-image:url (border.png) 3030 RMB / Safari 5 /

-o-border-image:url (border.png) 3030RMB /

Border-image:url (border.png) 3030round

}

Note: the border-image attribute is not supported by InternetExplorer; the border-image attribute specifies the picture to be used as a border.

3. Border-radius of the new attribute of css3: fillet border

Div

{

Border:2pxsolid

Border-radius:25px

}

4. Box-shadow of the new attribute of css3: shadow effect

Box-shadow in css3 is used to add shadows to the box

Div

{

Box-shadow:10px10px5px#888888

}

2. Add background attributes to css3

1. Background-size of the new attribute of css3: specify the size of the background image

Before CSS3, the size of the background picture was determined by the actual size of the picture. In CSS3, you can specify the size of the background image, which allows us to reuse the background image in different environments. You can specify the size in pixels or percentage. If the size is specified as a percentage, the dimension is relative to the width and height of the parent element.

Div

{

Background:url (img_flwr.gif)

Background-size:80px60px

Background-repeat:no-repeat

}

2. Background-origin of the new attribute of css3: specify where the background image is displayed.

Background pictures can be placed in the content-box, padding-box, or border-box area.

Div

{

Background-image:url ('smiley.gif')

Background-repeat:no-repeat

Background-position:left

Background-origin:content-box

}

3. Background-clip of the new attribute of css3: specify where to start clipping the background image.

Div

{

Background-color:yellow

Background-clip:content-box

}

3. Add text effect to css3

1. Text-shadow of the new attribute of css3: text shadow

H2

{

Text-shadow:5px5px5px#FF0000

}

Description:

(1) and are optional, when not specified, the text color is used; when not specified, the radius value is 0

(2) shadow can be a comma-separated list, such as text-shadow:2px2px2px#ccc,3px3px3px#ddd

(3) Shadow effects are applied to elements in the order specified in shadowlist

(4) these shadow effects may overlap each other, but will not superimpose the text itself.

(5) Shadows may run beyond the boundaries of the container, but will not affect the size of the container.

The above is all the content of this article "what are the new attributes of 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.