What are the new attributes of css3? Summary of new attributes commonly used in css3

What are the new attributes of css3? Anyone who asks this question should know that css3 is an upgraded version of css. So, since css3 is an upgraded version, it will naturally add some new attributes. Next, this article will introduce to you about css3 Commonly used new attributes.

1. New border attributes in css3

1. Border-color, a new attribute in css3: Set multiple colors for the border

p
  {
  border-style:solid;  
  border-color:#ff0000 #0000ff;
  }

Let me digress here. It should be noted that the "border-width" attribute will not work if used alone. Please set the border first using the "border-style" property.

2. Border-image, a new attribute of css3: picture border

The border-image attribute of css3 uses images to create borders

div
{
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */
-o-border-image:url(border.png) 30 30 round; /* Opera */
border-image:url(border.png) 30 30 round;
}

Note: Internet Explorer does not support the border-image attribute; the border-image attribute specifies the image used as the border.

3. Border-radius, a new attribute in css3: rounded border

div
{
border:2px solid;
border-radius:25px;
}

4. Box-shadow, a new attribute in css3: shadow effect

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

div
{
box-shadow: 10px 10px 5px #888888;
}

2. New background attribute in css3

1 . Background-size, a new attribute of CSS3: Specify the size of the background image

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

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

2. Background-origin, a new attribute in css3: Specify where to start displaying the background image.

The background image can be placed in the content-box and 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, a new attribute in css3: Specify where to start cutting the background image

div
{
background-color:yellow;
background-clip:content-box;
}

3. New text effects in css3

1. Text-shadow, a new attribute in css3: text shadow

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Description:

(1) 5275270f2d75787ee7654275985cc94f and d1e7a011b4299cd1bb50fec200b64ff8 are optional. When 5275270f2d75787ee7654275985cc94f is not specified, the text color will be used; when d1e7a011b4299cd1bb50fec200b64ff8 is not specified, the radius value is 0;

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

(3) The shadow effect will be as follows The order specified in the shadow list is applied to the elements;

(4) These shadow effects may overlap each other, but will not overlap the text itself;

(5) The shadow may run to the container outside the bounds, but does not affect the size of the container.

2. Word-wrap, a new attribute in css3: automatic line wrapping

If a word is too long, it may not exceed a certain area, allowing long words to be split. , and wrap to the next line

p {word-wrap:break-word;}

4. New animation effect in css3

1. Transform transformation effect:

css3 provides element deformation effects, also called transformations. It can rotate, scale and translate elements.

Attribute value: (1) transform; (2) transform-origin: The transform-origin attribute can set the starting point of the transformation. By default, the center of the element is used as the starting point.

2. animation animation effect

CSS3 provides animation effects similar to Flash keyframe control, which is achieved through the animation attribute. Then the previous transition attribute can only achieve animation effects by specifying the initial state and end state of the attribute, which has certain limitations.

animation Realizing animation effects mainly consists of two parts: 1. Declaring an animation through key frames similar to Flash animation; 2. Calling the animation declared by key frames in the animation attribute.

5. New transition effect in css3

1. Transition transition effect

The transition effect is generally passed Some simple CSS actions trigger smooth transition functions, such as :hover, :focus, :active, :checked, etc. CSS3 provides the transition attribute to implement this transition function.

For the new transition content and new animation effects of CSS3, you can also refer to CSS3 latest version reference manual. The content is very detailed.

This article ends here. The above is a summary of the new common attributes in CSS3.

Related recommendations:

What are the new background attributes of CSS3

The new attributes of CSS3 and their usage

The above is the detailed content of What are the new attributes of css3? Summary of new attributes commonly used in css3. For more information, please follow other related articles on the PHP Chinese website!