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