-
常见的媒体类型的引用方法：
1、link标签
link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。
<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" />
2、@import方法
@import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。
@importurl(reset.css) screen; @importurl(print.css) print;
在<head>中的<style>标签中引入媒体类型方法。
<head> <style type="text/css"> @importurl(style.css) all; </style> </head>
3、Media方法
media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。
（1）在样式文件中引用媒体类型：
@media screen { 选择器{/*你的样式代码写在这里…*/} }（2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。
<head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>查看全部 -
媒体类型：
常用的三种媒体类型：
Screen、电脑显示器
all、所有设备
Print：打印用纸或打印预览视图
查看全部 -
css3变形：
旋转-webkit-transform:rotate();
扭曲变形-webkit-transform:skew()
缩放:-webkit-transform:scale();
位移:-webkit-transform:translate();
矩阵:-webkit-transform:matrix();
变形-原点：transform-origin:left top;
查看全部 -
用法：
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);
transform:rotate(7deg); //统一标识语句，符合w3c标准查看全部 -
//-ms代表【ie】内核识别码
//-moz代表火狐【firefox】内核识别码
//-webkit代表谷歌【chrome】/苹果【safari】内核识别码
//-o代表欧朋【opera】内核识别码
查看全部 -
box-sizing中content-box和border-box的区别
查看全部 -
background-size: auto|<px>|%|cover|contains
1、auto：默认值，不改变背景图片的原始高度和宽度；
2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
查看全部 -
background-origin:表明背景颜色作用与盒模型的哪一界限
查看全部 -
box-shadow 默认外部阴影 可选择inset设置默认内部阴影
查看全部 -
box-radius实现圆
width : 100px;
height: 100px;
border-radius : 50px; //宽度一半
上半圆
width : 100px;
height : 50px;
border-radius : 50px 50px 0 0 ;
下半圆：
border-radius : 0 0 50px 50px;
左半圆：
width : 50px;
height: 100px;
border-radius : 50px 0 0 50px;
右半圆：
border-radius : 0 50px 50px 0;
查看全部 -
Css3中的动画--过度属性 transition-property
transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。
在CSS中创建简单的过渡效果可以从以下几个步骤来实现： 第一，在默认样式中声明元素的初始状态样式； 第二，声明过渡元素最终状态样式，比如悬浮状态； 第三，在默认样式中通过添加过渡函数，添加一些不同的样式。
CSS3的过度transition属性是一个复合属性，主要包括以下几个子属性：
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
[object Object]
transition-delay:指定开始出现的延迟时间
transition-property用来指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：
css:
查看全部 -
background-origin只对背景图片有效，对背景色不起作用
background-clip对背景图片和颜色同样有效
查看全部 -
边框背景设置参数：图片路径 宽度 延伸方式
宽度要省略px
延伸方式分为三种repeat（平铺），round（重复），stretch（拉伸）
查看全部 -
CSS3中的变形--位移
translate()函数可以将元素向指定的方向移动，类似于类似position中的relative。
或以简单的理解为，使用translate()函数，可以把元素原来的位置移动，而不影响在X,Y上的任何web组件。
translate分为三种情况：
1、translate（X，Y）水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
语法：
transform:translate(-50%,-50%);
2、translate（X）仅水平方向移动（X轴移动）
3、translate（y）仅垂直方向移动（Y轴移动）
查看全部 -
CSS3中的变形--缩放 scale()
缩放 scale()函数 让元素根据中心原点对对象进行缩放。
缩放scale具有三种情况：
1、scale（X，Y）使元素水平方向和垂直方向同时缩放（也就是X和Y轴同时缩放）
例：
transform: scale(1.5,0.5);
Y是可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
2、scaleX(x)元素仅水平方向缩放（X轴缩放）
3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）
查看全部
举报