search

Home >Web Front-end >CSS Tutorial >List of new features of CSS3

List of new features of CSS3

高洛峰
高洛峰Original
2017-02-23 10:33:551449browse

I have been exposed to CSS3 for so long. I always use it directly when I need to use it, but I haven’t summarized it properly, so let’s sort it out here.

CSS3 border:

Rounded border:

Key: border-radius

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
width:350px;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
</style>
</head>
<body>

<div>圆角边框</div>

</body>
</html>

CSS3 border-shadow:

Key: box-shadow

Syntax: Object selector {box-shadow:[projection mode,] X-axis offset, Y-axis offset[, shadow blur radius][, shadow extension Radius][,shadow color]}　

Projection method: This parameter is optional. If no value is set, the default projection method is outer shadow; if the unique value "inset" is taken, the projection is inner shadow;

X-offset: shadow horizontal offset, its value can be positive or negative . If the value is positive, the shadow is on the right side of the object. If the value is negative, the shadow is on the left side of the object;

Y-offset: the vertical offset of the shadow, its value can also be positive or negative. . If it is a positive value, the shadow is at the bottom of the object. When it is a negative value, the shadow is at the top of the object;

Shadow blur radius: This parameter is optional, but its value can only be a positive value. If When its value is 0, it means that the shadow has no blur effect. The larger the value, the blurr the edge of the shadow;

Shadow expansion radius: This parameter is optional, and its value can be positive or negative. If the value is If it is positive, the entire shadow will be extended and expanded. If the value is negative, it will be reduced.

Shadow color: This parameter is optional. If the color is not set, the browser will use the default color, but the default color of each browser is inconsistent, especially the transparent color under the Safari and Chrome browsers under the webkit kernel, and the black color under Firefox/Opera (has been verification), it is recommended not to omit this parameter.


CSS3 border image:

Key: -webkit-border-image

For example: 

p
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

CSS3 background: The

background-size attribute specifies the size of the background image

p
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

background-origin attribute specifies the positioning area of ​​the background image

CSS3新特性罗列 

p
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 multiple background images

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

CSS3 text effect

CSS3 text shadow

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

CSS3Word Wrap

p {word-wrap:break-word;}

In the new @font-face rule, you must first define the name of the font (such as myFirstFont) and then point to the font file .

To use a font for an HTML element, reference the name of the font (myFirstFont) through the font-family attribute: 

c9ccee2e6ea535a969eb3f532ad9fe89 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}531ac245ce3e4fe3d50054a55f265927

CSS3 2D Transformation

Translate: translate

p
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
}

Rotate: rotate

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

Scale: scale

Through the scale() method, the size of the element will increase or decrease, according to the given width (X axis) and height (Y axis) parameters: 

p
{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}

Flip: skew

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

p
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

CSS3 3d conversion

rotateX()

Rotate along the Add an effect (smooth transition) to elements as they change from one style to another without using Flash animation or JavaScript.

Add transition effects to width, height and transition: 

p
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

Summary:

Required Given a starting state and an ending state,

then add transition to p: wide transition time, high transition time, transition transition time

transition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]

CSS3 animation

Set action@keyframes

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}

Set action class

.myaction{
　　animation:myfirst 5s;
}

Add action class to p

$("...").addClass(&#39;.myaction&#39;);

Note:

Syntax:

animation:name duration timing-function delay iteration-count direction

name: The name of @keyframes

duration: Specifies the time it takes to complete the animation, in seconds or milliseconds.

timing-function: Specifies the speed curve of animation.

Value of timing-function

Description

linearUniform speedslow fast slow##ease-in　Low speed startease-outEnd at low speedease-in-outStart and end at low speedcubic-bezier(n,n,n,n)My own value in the cubic-bezier function, from 0 to 1

 

 

 

 

 

 

 

delay：动画开始之前的延迟，秒。

iteration-count:规定动画播放的次数：具体数值或infinite（无限次）。

direction:规定是否轮流反向播放动画。normal正常播放，alternate轮流反向播放。

 

CSS3多列：

创建多个列对文本进行布局

p
{
-moz-column-count:3;     /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}


CSS3用户界面

p
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}

 

CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点，需要好好掌握。

更多CSS3新特性罗列 相关文章请关注PHP中文网！

ease
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：CSS blending modesNext article：CSS blending modes

Related articles

See more