CSS3入门

CSS3

w3cschools css3  MDN英文  MDN中文

CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties(备受期待的新特性), like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts.(圆角，阴影，渐变，渐变，过渡，动画和新的布局多栏，弹性盒子，网格布局) 

Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme caution as both their syntax and semantics can change in the future.

CSS3 Modules

CSS3 has been split into "modules".(这些模块彼此独立， 按照各自的进度来进行标准化)   It contains the "old CSS specification" (which has been split into smaller pieces). In addition, new modules are added.

Some of the most important CSS3 modules are:

• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface

Most of the new CSS3 properties are implemented in modern browsers.

一些新增的CSS3属性

 border-radius

IE9+

border-image

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

CSS3 Backgrounds

background-image 

给同一个元素增加多个背景图片

CSS3 allows you to add multiple background images for an element

background-size 

The CSS3 background-size property allows you to specify the size of background images.

Before CSS3, the size of a background image was the actual size of the image. CSS3 allows us to re-use background images in different contexts.

The size can be specified in 1: lengths,  2: percentages, or by using one of the  3:  two keywords: contain or cover.

stretch: 把图片宽高都让其与容器适应

cover    某一边适应容器，而另一边被切割

contain  看电影一样会留下黑边

background-origin

The CSS3 background-origin property specifies where the background image is positioned.

The property takes three different values:

• border-box - the background image starts from the upper left corner of the border
• padding-box - (default) the background image starts from the upper left corner of the padding edge
• content-box - the background image starts from the upper left corner of the content

background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

• border-box - (default) the background is painted to the outside edge of the border
• padding-box - the background is painted to the outside edge of the padding
• content-box - the background is painted within the content box

CSS3 Colors

CSS supports color names, hexadecimal and RGB colors.

In addition, CSS3 also introduces:

• RGBA colors                 #p1 {background-color: rgba(255, 0, 0, 0.3);}
• HSL colors                    #p1 {background-color: hsl(120, 100%, 50%);}
• HSLA colors                 #p1 {background-color: hsla(120, 100%, 50%, 0.3);}
• opacity                        #p1 {background-color:rgb(255,0,0);opacity:0.6;} 

CSS3 Gradients(IE10+)

CSS3 gradients let you display smooth transitions between two or more specified colors.

Earlier, you had to use images for these effects. However, by using CSS3 gradients you can reduce download time and bandwidth usage. In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.

CSS3 Shadow Effects

With CSS3 you can add shadow to text and to elements.

In this chapter you will learn about the following properties:

• text-shadow
• box-shadow

text-shadow（IE10+）

The CSS3 text-shadow property applies shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

box-shadow(IE9+)

The CSS3 box-shadow property applies shadow to elements.

CSS3 Text

CSS3 contains several new text features.

In this chapter you will learn about the following text properties:

• text-overflow
• word-wrap
• word-break

text-overflow

The CSS3 text-overflow property specifies how overflowed content that is not displayed should be signaled to the user.

text-overflow: clip ellipsis "string"

word-wrap

允许长单词换行到下一行. 允许长单词被拦腰打断转换到另一行

word-break

The word-break CSS property is used to specify whether to break lines within words.

word-break: normal; 
word-break: break-all; 
word-break: keep-all;

Web Fonts

CSS3 Web Fonts(在线字体) - The @font-face Rule

Web fonts allow Web designers to use fonts that are not installed(没有安装在用户计算机上的) on the user's computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Different Font Formats

TTF OTF WOFF   WOFF2.O    SVG Fonts/Shape   EOT

SVG Fonts/Shape:SVG fonts allow SVG to be used as glyphs when displaying text.

例子：

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

CSS3 Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew(移动，旋转，缩放，拉伸) elements.

A transformation is an effect that lets an element change shape, size and position(形状，大小，位置).

CSS3 supports 2D and 3D transformations.

2D Transforms(IE10+)

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

2D Transform Methods

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n)	Defines a 2D translation, moving the element along the X-axis
translateY(n)	Defines a 2D translation, moving the element along the Y-axis
scale(x,y)	Defines a 2D scale transformation, changing the elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

 

 

 

 

 

 

 

 

transform:translate()

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

transform:rotate()

2D 的旋转

The rotate() method rotates an element clockwise or counter-clockwise(逆时针) according to a given degree.

transform:scale()

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

transform:skewX()

The skewX() method skews an element along the X-axis by the given angle.

transform:skewY()

The skewY() method skews an element along the Y-axis by the given angle.

transform:skew()

The skew() method skews an element along the X and Y-axis by the given angles.

transform: matrix()

The matrix() method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

transform-origin

Allows you to change the position(位置) on transformed elements

CSS3 3D Transforms

CSS3 allows you to format your elements using 3D transformations.

CSS3 Transform Properties

The following table lists all the 3D transform properties:

Property	Description
transform	Applies a 2D or 3D transformation to an element
transform-origin	Allows you to change the position on transformed elements
transform-style	Specifies how nested elements are rendered in 3D space
perspective	Specifies the perspective on how 3D elements are viewed
perspective-origin	Specifies the bottom position of 3D elements
backface-visibility	Defines whether or not an element should be visible when not facing the screen

transform-style

transform-style: flat|preserve-3d|initial|inherit;

perserve-3d Specifies that child elements will preserve its 3D position

3D Transform Methods

 

 

Function	Description
matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	Defines a 3D transformation, using a 4x4 matrix of 16 values
translate3d(x,y,z)	Defines a 3D translation
translateX(x)	Defines a 3D translation, using only the value for the X-axis
translateY(y)	Defines a 3D translation, using only the value for the Y-axis
translateZ(z)	Defines a 3D translation, using only the value for the Z-axis
scale3d(x,y,z)	Defines a 3D scale transformation
scaleX(x)	Defines a 3D scale transformation by giving a value for the X-axis
scaleY(y)	Defines a 3D scale transformation by giving a value for the Y-axis
scaleZ(z)	Defines a 3D scale transformation by giving a value for the Z-axis
rotate3d(x,y,z,angle)	Defines a 3D rotation
rotateX(angle)	Defines a 3D rotation along the X-axis
rotateY(angle)	Defines a 3D rotation along the Y-axis
rotateZ(angle)	Defines a 3D rotation along the Z-axis
perspective(n)	Defines a perspective view for a 3D transformed element

 

rotateX(),rotateY(),rotateZ()

3D旋转，围绕空间的3D坐标

perspective

好吧，CSS3 3D transform变换，不过如此！    原理演示网站

Set the perspective(视点) from where an element is viewed

Transitions(过渡效果IE10+)

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

transition	A shorthand property for setting the four transition properties into a single property
transition-delay	Specifies a delay (in seconds) for the transition effect
transition-duration	Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property	Specifies the name of the CSS property the transition effect is for
transition-timing-function	Specifies the speed curve of the transition effect

transition: property duration timing-function delay;

Animations(动画)

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

What are CSS3 Animations?

An animation lets an element gradually change from one style to another.

You can change as many CSS properties you want, as many times you want.

To use CSS3 animation, you must first specify some keyframes for the animation.

Keyframes hold what styles the element will have at certain times.

The following table lists the @keyframes rule and all the animation properties:

Property	Description
@keyframes	Specifies the animation code
animation	A shorthand property for setting all the animation properties
animation-delay	Specifies a delay(延迟) for the start of an animation
animation-direction	Specifies whether an animation should play in reverse direction or alternate cycles
animation-duration	Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode	Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count	Specifies the number of times an animation should be played
animation-name	Specifies the name of the @keyframes animation
animation-play-state	Specifies whether the animation is running or paused
animation-timing-function	Specifies the speed curve of the animation

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

animation-direction: normal|alternate;

animation-direction 属性定义是否应该轮流反向播放动画。

CSS Images

Rounded Images

Use the border-radius property to create rounded images:

Thumbnail Images

Use the border property to create thumbnail images.

Responsive Images(响应式)

Responsive images will automatically adjust(自动调整) to fit the size of the screen.

Center an Image

To center an image within the page, use margin: auto; and make it into a block element:

img {
    display: block;
    margin: auto;
    width: 50%;
}

Image Filters

The CSS filter property adds visual effects (like blur and saturation) to an element.

Note: The filter property is not supported in Internet Explorer(IE不支持), Edge 12, or Safari 5.1 and earlier.

CSS Buttons

 

CSS Pagination Examples

 

CSS3 Multi-column Layout

The CSS3 multi-column layout allows easy definition of multiple columns of text - just like in newspapers(像报纸文字那样的多栏布局):

In this chapter you will learn about the following multi-column properties:

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

column-count

The column-count property specifies the number of columns an element(元素被分为多少列) should be divided into.

column-gap 

分栏之间的间距

Column Rules

column-rule  column-rule-width column-rule-style column-rule-color

分栏之间的宽度 样式 颜色

column-span

元素“横跨”多少栏

column-width

栏目宽度

User Interface

resize

whether or not an element should be resizable by the user.

outline-offset

adds space between an outline and the edge or border of an element.(外边框和边距之间的距离)

Box-sizing

content-box（default），border-box，padding-box

区别在于计算宽度高度时的差别

Flexbox

new layout mode in CSS3

Media Queries