Css3 common attribute phenotype, css3 phenotype

Source: Internet
Author: User

Css3 common attribute phenotype, css3 phenotype

The use of css3 has been distributed on various websites. Its use is of great help to front-end developers. For example, the previous rounded rectangle needs to be completed using background images, now you only need to use border-radius: 5px; to make the effect of the rounded border. Today, we will record some common attributes of css3.

Source of this article: www.liteng.org If You Need To reprint it, please indicate the source. Otherwise, legal liability will be held accountable.

The copyright belongs to the author and the blog site.

Box properties:Border rounded corner: radius, border shadow: box-shadow

Border: border-radius: top-left top-right bottom-left;

Here we will describe the sequence of Box border style design.

border-radius:10px;Border-top-left-radius: 10px;

border-top-left-radius:10px;

Box shadow box-shadow:H-shadow V-shadow BlurColor inset/outset

Box-shadow: 5px 5px 5px red;

The default value is the outer shadow outset.

box-shadow:5px 5px 5px red;
Box-shadow: 5px 5px 5px red inset;
box-shadow:5px 5px 5px red inset;

Of course, you can set multiple shadows by adding ',' to the backend ','.

Box-shadow: 5px 5px 5px red inset,-5px-5px 5px green;
box-shadow:5px 5px 5px red inset,-5px -5px 5px green;

Convert 2D/3D: transform: rotate, scale, skew

Browser support: IE10, firfox, and opera

To achieve compatibility between browsers, use the following method:

-ms-transform:rotate(45deg); /* IE 9 */-moz-transform:rotate(45deg); /* Firefox */-webkit-transform:rotate(45deg); /* Safari and Chrome */-o-transform:rotate(45deg); /* Opera */transform:rotate(45deg);

Currently, the range is only 2d.

Transform: rotate (Xdeg) defines Angle Rotation

Transform: rotate (0deg) transform: rotate (45deg)
transform:rotate(45deg)

Transform: rotate (Xdeg) defines Angle Rotation

Transform: scale (x ):The scaling parameter is a multiple of the scaling.

Transform: scale (1, 1.5)

Note: it refers to scaling in the x and y directions of the original base.

Skew () method

Transform: skew (0deg, 45deg)

The skew () method is used to flip an element to a given angle based on the given horizontal line (X axis) and vertical line (Y axis) parameters:

Animation of css3: animate

Animation: myanimation 5S linear infinite

Animation: myanimation 5S linear infinite; (specified frame name, execution interval, effect, number of executions)

<Div> Source: www.liteng.org. If you need to reprint it, please indicate the source. Otherwise, legal liability will be held accountable.

The copyright belongs to the author and the blog site.

Animation execution effect: linear: uniform speed, uniform: Uniform Acceleration, slow-in: slow start, slow-out: Slow end, slow-in-out: slow start and slow end.

Address: http://liteng.org/node/56

More effects: url: http://2.liteng.sinaapp.com/HTML5/index.html

Next, we will record the usage of the css3 selector.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.