What are the new properties of CSS3? Summary of new properties commonly used in CSS3

What are the new properties of CSS3? To ask the question of people should know that CSS3 is the upgrade version of the CSS, then, CSS3 since the upgrade version, will naturally add some properties, next this article will introduce you about new properties that are commonly used in CSS3。

First, CSS3 new border properties

1, CSS3 new properties of Border-color: Set a variety of colors for the border

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

Here's an aside, it's important to note that the "Border-width" attribute will not work if it is used alone. First use the "Border-style" property to set the border.

2, CSS3 new properties of the Border-image: Picture border

The Border-image property of CSS3 is to use a picture to create a border

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 property; The Border-image property specifies a picture to use as a border.

3, CSS3 new properties of the Border-radius: rounded border

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

4, CSS3 new properties of the Box-shadow: Shadow Effect

CSS3 in Box-shadow to add a shadow to a box

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

Second, CSS3 new background properties

1, CSS3 new properties Background-size: Specify the background image size

Before CSS3, the size of the background image is 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 dimensions in pixels or percentages. If the dimension is specified as a percentage, the size is 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, CSS3 new properties of Background-origin: Specify where the background image starts to show

The background image can be placed in the Content-box, Padding-box, or border-box areas.

div
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box;
}

3. CSS3 New attribute Background-clip: Specify where the background image starts cropping

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

Third, CSS3 new text effect

1, CSS3 new properties of the Text-shadow: Text shadow

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

Description

(1) < color > and < blur radius > is optional, when < color > is not specified, the text color will be used; When < blur radius > 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 is applied to the element in the order specified in the shadow list;

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

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

2, CSS3 new properties of Word-wrap: Automatic line wrapping

If the word is too long, you may not be able to go beyond an area, allowing splitting of long words and wrapping to the next line

p {Word-wrap:break-word;}

Iv. CSS3 New Animation effect

1. Transform Transform effect:

CSS3 provides an element deformation effect, also called a transform. It enables the ability to rotate, scale, and pan elements.

Property values:(1) transform; (2) The Transform-origin:transform-origin property sets the starting point for the transformation. By default, the center of the element is used as the starting point.

2. Animation animation effect

CSS3 provides an animated effect similar to Flash Keyframe control, implemented through the animation property. The previous transition attribute can only be animated by specifying the initial state and end state of the property, with some limitations.

Animation The animation effect is composed of two parts: 1, the animation is declared by a key frame similar to the Flash animation; 2. The animation of the Keyframe declaration is invoked in the animation property.

V. CSS3 new Transition effect

1. Transition transition Effect

Transition effect is generally through some simple CSS action to trigger the smooth transition function, such as:: Hover,: Focus,: Active,: checked and so on. CSS3 provides the transition property to implement this transition function.

You can also refer to CSS3 's latest version of the reference manual for CSS3 's new transitions and new animated effects for CSS. The contents are very detailed.

This article is here to end, the above is for everyone to summarize the CSS3 in the new common attributes.