Expression type of css3 common attributes_html/css_WEB-ITnose

The use of css3 has been distributed on various websites, and its use is of great help to front-end developers. For example, the previous rounded rectangle needed to be completed using a background image, but now only You need to use border-radius:5px; to create a rounded border effect. Today we will record some commonly used properties of CSS3.

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

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

Here we first describe the sequence of box border style design

border-radius:10px;

border-radius:10px;

border-top- left-radius:10px;

border-top-left-radius:10px;

box-shadow:h-shadow v-shadow blur color inset/outset

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

The default is 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 To set multiple shadows, just add ',' after them.

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, opera

In order to achieve compatibility with various browsers. Please 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);

The current scope is only in 2d, all 2d examples are given first

transform:rotate(Xdeg) defines angle rotation

transform:rotate(0deg)

transform:rotate(45deg)

transform:rotate(45deg)

transform:rotate(Xdeg) defines angle rotation

Practicality Then the wise will see the wisdom.

transform:scale(x): The scaling parameter is the scaling multiple

transform:scale(1.5)

Note: refers to scaling in the x, y direction of the original foundation

skew() method

transform:skew (0deg,45deg)

Through the skew() method, the element is flipped by the given angle, according to the given horizontal line (X axis) and vertical line (Y axis) parameters:

CSS3 animation: animate

animation:myanimation 5s linear infinite

animation:myanimation 5s linear infinite; (specified frame name, execution time interval, effect, Number of executions)

<div style="height: 100px; width: 100px; text-align: center; border: 4px solid rgb(0, 0, 255);animation:myanimation 5s linear infinite;">animation:myanimation 5s linear infinite</div><p><style type="text/css">@keyframes myanimation{    0%{       background-color:red;     }    50%{       background-color:green;     }    100%{       transform:rotate(720deg);       border-radius:50%;       background-color:gray;     }  }</style>

Animation execution effect: linear: uniform speed, ease: uniform acceleration, ease-in: deceleration starts, ease-out: deceleration ends, ease-in-out :Deceleration starts and ends.

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

The next article will record how to use css3 selector