css3学习

css3-2015.12.14学习

css3模块

css3被划分为模块。

其中最重要的css3模块包括：

选择器

框模型

背景和边框

文本效果

2D/3D转换

动画

多列布局

用户界面

   

css3边框

通过css3,您能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框-并且不需要使用设计软件

border-radius

box-shasow

border-image

-moz-border-image:url(img) 30 30 round;  //老的火狐浏览器

-webkit-border-image:url(img) 30 30 round;      //Safari和谷歌

-o-border-image:url(img) 30 30 round;              //Opera

border-image:url(img) 30 30 round;

解释以上语句的具体含义：

***************************************************************************

border-image:url(img) 30 30 stretch;

解释以上语句的具体含义：

*******************************************************************************

css3背景

css3包含多个新的背景属性，他们提供对背景更强大的控制。

background-size

background-origin

在css3之前，背景图片的尺寸是由图片的实际尺寸决定的，在css3中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片

您能够以像素或者百分比规定尺寸。注意：如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度

？/在W3C中背景图片尺寸的示例中有个padding的用法值得学习！

background-origin属性规定背景图片的定位区域

背景图片可以放置于content-box,padding-box或者border-box区域

你知道上面的content-box,padding-box或者border-box区域指的是什么吗？？

background-clip???、？？

背景图片还可以是多个背景图片：

body{

background-image:url().url()

}   //这样就设置了两幅背景图片。    但是这两幅图片到底是以什么形式呈现呢？？

css3文本效果

text-shadow

word-wrap

 

text-shadow可向文本应用阴影，您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：

h1{

text-shadow:5px 5px 5px #FF0000；

}

word-shadow属性允许你将文本强制换行，p{word-wrap:break-word;}当p中的内容超出我们规定的边框时就会自动换行！！和规定在width和height同时规定word-wrap:break-word

css3 @font-face规则

使用你需要的字体

在新的@font-face规则总，你必须首先定义字体的名称（比如myFirstFont）,然后指向该字体文件。

如需为HTML元素使用字体，请通过font-family属性来引用字体的名称（myFirstFont）;

demo:

<style>

@font-face{

font-family:myFirstFont;

src:url()

}

div{

font-family:myFirstFont;

}

 

css3-2015.12.15学习

css3  2D转换

通过css3我们能够对元素进行移动、缩放、转动、拉长或拉伸。

转换是使元素改变形状，尺寸和位置的一种效果

translate()          //元素从当前位置移动，根据给定的left和top位置参数  translate(x,y)   W3C上面使用的例子不明白？？？

rotate()             //元素顺时针旋转的角度，允许负值，元素将逆时针旋转  例如：rotate(30deg)  顺时针选择30度；

scale()             //元素尺寸会增加多少或者减少多少   scale(x,y)

skew()             //元素翻转给定的角度  skew(xdeg,ydeg)

matrix()           //matrix()方法把所有2D转换方法组合在一起。matrix()方法需要六个参数，包括数学函数，允许你：旋转、缩放哪个、移动以及倾斜元素；

css3  3D转换

rotateX()         //围绕X轴以给定的角度进行旋转   例如：transform:rotateX(120deg);

rotateY()        //围绕Y轴以给定的角度进行旋转

css3过渡

css3过渡是元素从一种样式逐渐改变为另一种元素的效果。

要实现这一点，必须规定两项内容：

规定你希望把效果添加到哪个css属性上

规定效果的时长   语法：在css规则中添加transition:css 时间；例如transitionn:width 2s