css3学习

来源:互联网 发布:格里芬体侧数据 编辑:程序博客网 时间:2024/07/24 00:43
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
0 0
原创粉丝点击