标签：src sele family hidden 变换 disable running rds 图片
border-radius:10px 10px 10px 10px;设置四个圆角的大小从左上开始算。
box-shadow:5px 5px (5px 5px #ccc inset);阴影前两个参数为必须，表示X和Y偏移的大小，后面的参数可选:第三个：阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 第四个阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；最后一个inset 表示为阴影在内部。阴影可以添加多个 用,来分隔。
border-image:url(图片地址) 12 repeat; repeat表示重复。需要先设置border的宽度。
color:rgba(1,1,1,0.1)最后一个数值大于0小于1表示透明度参数。
background-color:linear-gradient(to left top,blue,red);表示背景颜色渐变，到右下到左上角开始颜色为BLUE 最后为red，中间可添加多个颜色.
text-overflow:ellopsis;表示文字溢出的时候使用省略号。要设置在一行显示而且多余的部分剪切。
.class{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap; 强制文本在一行内显示
width:200px;
background:#ccc;
}
@font-face {
font-family : 字体名称;
src : 字体文件在服务器上的相对或绝对路径;
}
@font-face{
font-family: "MOOC Font";
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
}
.demo {
width: 340px;
padding: 30px;
color: #566F89;
background: #000;
font-size:58px;
font-family: "MOOC Font";
}使用demo的标签中的字体就是MOOC Font字体。
设置字体类型，使用户可以使用服务器的字体
text-shadow:2px 2px 0 red;前面两个表示向右和下方向的阴影便宜，负数相反，第三个数不能为负数，表示模糊程度，越大越模糊注意加px，最后一个为颜色。
背景相关样式：background-origin:border-box|content-box|padding-box;表示背景图片的其实位置 只有当background:no-repeat的时候才有效.
background-clip:border-box|content-box|padding-box|no-clip；表示背景图片裁剪：no-clip表示不裁切，和参数border-box显示同样的效果，默认为border-box。
background-size: auto | <长度值> | <百分比> | cover | contain 设置背景图片的大小.auto表示默认。长度值表示拉成到这个长度。百分比也是按比例拉伸的，长宽有可能超出。cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器：长宽可能会超出范围。contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止不一定满。
multiple backgrounds：多重布局background ：[background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...有size属性则在position后加/background:url(http://static.mukewang.com/static/img/logo_index.png) left top/250px 70px no-repeat, url(http://static.mukewang.com/static/img/logo_index.png)right bottom/150px 30px no-repeat;
css3属性选择器 ^ 前模糊查询 $后模糊查询 *模糊查询 应该是这个机制吧！
a[name^=“val”]a中有name属性而且name属性以val开头。
a[name$=“val”]a中有name属性而且name属性以val结尾。
a[name*=“val”]a中有name属性而且name属性中含有val。
css伪类选择器：
:root{}根元素。一般指的html元素。
input:not([type="submit"]){
border:1px solid red;
}:not除了这个之外的元素。
p:empty {
display: none;
}?：empty选出其中为空的元素
：target
：first-child第一个子节点 :first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
:last-child最后一个子节点
:nth-child(2n);表示双数的子节点。而且子节点的类型要符合前面的子节点 div>p 要是P元素。nth-of-type和nth-child的差别就是type先选出所有符合的子元素，在按()中的选择，child是先选出child再看这个元素是不是这个类型的子元素。
:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
:last-of-type:最后一个符合的元素 的节点
:nth-of-type()符合的元素节点，再按()中的来查找符合的。
:nth-last-of-type()
:only-child只有一个子节点的
:only-of-tyoe只有一个子节点的。父节点可以有很多个子节点，但是目标节点这种的只有一个。
input[type="text"]:enabled可以选择的表单元素
input[type="text"]:disabled不可以选择的表单元素
input:[type="radio"]:checked 被选中的元素
::selection.::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体，
有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀::-moz-selection{background: orange; color: white;}
:read-only{}有只读属性的元素
：read-write表示可读写的元素
::before ::after{content:"";}表示在元素内的前后插入一个空的content来清除浮动
CSS3旋转变形 transform：
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
transform:rotate(-20deg);
}
transform:skew(20deg,20deg);倾斜扭曲第一个为X轴左右扭曲，正数下面向右扭曲 Y是上下扭曲
opacity：透明度，默认为1
transform:scale(1.5,1.5);缩放，按照比例进行缩放。transform:scaleX(1.2)表示水平放大1.2倍Y同理
transform:translate(100px,100px);向右和下面平移100px， transform:translate(-50%,-50%);平移自身长度的50%。
transform:((1,0,0,1,100,100)a为元素的水平伸缩量，1为原始大小；b为纵向扭曲，0为不变；c为横向扭曲，0不变；d为垂直伸缩量，1为原始大小；e为水平偏移量，0是初始位置；f为垂直偏移量，0是初始位置
transform-origin:top left;原点的位置 transition设置在原来的css中，然后在：hover中设置要改变的属性和最终的属性值。
transition: all 3s ease-in-out .8s;变换，第一个参数指定哪些property属性变化，第二个为duration过渡时间，第三个为变换的方法timing-function 最后一个为delay反应时间，过了这个时间才开始变换。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
animation 动画 先定一一个帧 @keyframes changecolor{0%{ background: red; }100%{background: green; }}然后在和transition一样 animation:changecolor 1s ease 0.1s
@keyframes around{
0% {
transform: translateX(0);
}
25%{
transform: translateX(180px);
}
50%{
transform: translate(180px, 180px);
}
75%{
transform:translate(0,180px);
}
100%{
transform: translateY(0);
}
}其中定义的位置都是相对于最开始的位置定义的。
animation-alteration-count：infinite 变化次数infinite表示一直循环。
animation-direction：alternate。表示奇数次前面播放，偶数次向后播放。
animation-play-state:paused;running 控制动画是否运动
animation-fill-mode：none forwords backwords both。表示结束后回到哪一帧。
CSS3 多列布局columns
注意兼容
-webkit-columns:100px 2;表示一列100px
-moz-columns: 100px ;
-o-columns:100px ;
-ms-columns:100px ;两个都设置的话按列数来显示。
column-width:列宽 column-count:列数。
column-gap： 列间距可以是em px不能是负值。
column-rule:2px dotted green 列的边框 三个参数 大小 solid 颜色。
column-span:all或者none 表示全部跨列或者不跨列。
W3C标准盒模型height表示内容的高度。ie传统盒模型height包括padding和border.
box-sizing：content-box|border-box|inherit 。标准模型 传统模型 继承父元素。
！！！！！！！！！！！！！！！！！！！！！！！！！！！flex伸缩布局：
css3媒体类型
responsive响应式设计。img {max-width:100%;}
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
@media (max-width: 480px) {}当宽度小于400时候的样式。
outline：red solid 2px 和border类似，但是不占空间 外轮廓。outline-offset:偏移，正数向外偏移，负数向内偏移。
插入内容：before 。下面是清除浮动的一种方法。
.clearfix:before,
.clearfix:after {
content:””;
display:table;
}
.clearfix:after {
clear:both;
overflow:hidden;
}
标签：src sele family hidden 变换 disable running rds 图片
原文地址：http://www.cnblogs.com/likechou/p/7518569.html
right){kind=link}