css 总结2 原

1、背景有关

（1）background-origin：border-box、padding-box、content-box //默认是padding-box

（2）background-image: url(img_flwr.gif), url(paper.gif);

（3）background-position: right bottom, left top;

（4）background-repeat: no-repeat、 repeat;

（5）background-attachment:fixed //固定背景的位置，不随滚动条滚动

background-origin是css新增属性，在此基础上可以用background-position进行偏移。两者没有可比性，是配合使用的，不能相互替代。

背景的简写：background:url(../../dist/img/xuanzhong.png) no-repeat 5px 5px/25px; 也可以多加一个背景颜色：background:#fd9a97 url(../../dist/img/xuanzhong.png) no-repeat 5px 5px/25px; 也可以设置离右边的距离：background:#fd9a97 url(../../dist/img/xuanzhong.png) no-repeat right 5px top 5px/25px;

 2、图片有关

img {
   position:absolute;            //必须
   clip:rect(0px 50px 200px 0px) //裁切方向top, right, bottom, left，始终是距离左边或者上边的距离
}

img {
   opacity:0.4;
   filter:alpha(opacity=40); /* For IE8 and earlier */
}

3、边框有关

border-radius采用的是左上角、右上角、右下角、左下角的顺序 border-radius:2em; 等价于： border-top-left-radius:2em; border-top-right-radius:2em; border-bottom-right-radius:2em; border-bottom-left-radius:2em; border-radius: 2em 1em 4em / 0.5em 3em;  //  “/”前面是水平方向半径  ，“/”后面是垂直方向半径 等价于： border-top-left-radius: 2em 0.5em; border-top-right-radius: 1em 3em; border-bottom-right-radius: 4em 0.5em; border-bottom-left-radius: 1em 3em;

4、阴影

box-shadow: h-shadow v-shadow blur spread color inset; h-shadow    必需。水平阴影的位置。允许负值。     v-shadow    必需。垂直阴影的位置。允许负值。     blur        可选。模糊距离。     spread        可选。阴影的尺寸。     color        可选。阴影的颜色。请参阅 CSS 颜色值。     inset        可选。将外部阴影 (outset) 改为内部阴影。 例子：box-shadow: 10px 10px 5px #888888;

5、2D转换

     5种方法

• translate()   //相对于自身的位置变换（在应该在的位置上变换）
• rotate()
• scale()
• skew()
• matrix()

 div { transform: translate(50px,100px); -ms-transform: translate(50px,100px);        /* IE 9 */ -webkit-transform: translate(50px,100px);    /* Safari and Chrome */ -o-transform: translate(50px,100px);        /* Opera */ -moz-transform: translate(50px,100px);        /* Firefox */ } div { transform: rotate(30deg); -ms-transform: rotate(30deg);        /* IE 9 */ -webkit-transform: rotate(30deg);    /* Safari and Chrome */ -o-transform: rotate(30deg);        /* Opera */ -moz-transform: rotate(30deg);        /* Firefox */ } div { transform: scale(2,4); -ms-transform: scale(2,4);    /* IE 9 */ -webkit-transform: scale(2,4);    /* Safari 和 Chrome */ -o-transform: scale(2,4);    /* Opera */ -moz-transform: scale(2,4);    /* Firefox */ } div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg);    /* IE 9 */ -webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */ -o-transform: skew(30deg,20deg);    /* Opera */ -moz-transform: skew(30deg,20deg);    /* Firefox */ } translate(x,y)    定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n)    定义 2D 转换，沿着 X 轴移动元素。 translateY(n)    定义 2D 转换，沿着 Y 轴移动元素。 scale(x,y)    定义 2D 缩放转换，改变元素的宽度和高度。 scaleX(n)    定义 2D 缩放转换，改变元素的宽度。 scaleY(n)    定义 2D 缩放转换，改变元素的高度。 transform:translate(0 ,-50%) rotate(45deg);

6、3D转换

perspective属性，设置从何处查看一个元素的角度，浏览器支持 ie10之上 多少像素的3D元素是从视图的perspective属性定义。这个属性允许你改变3D元素是怎样查看透视图 定义的perspective属性它是应用在元素的子元素而不是元素本身 perspective-origin 属性 观察者的位置，观察者可移动的区域就是被观察的物体未变换前的区域范围 默认值为50% 50%（即观察范围的中心） transform-style :flat| preserve-3d ,默认是flat preserve-3d意思是被转换的子元素保存其3D转换（即如果是preserve-3d 看起来像穿透一个平面，而不是近大远小的视觉）

7、transtion过渡 

div {     transition: width 1s linear 2s;     /* Safari */     -webkit-transition:width 1s linear 2s; } div {     transition-property: width;     transition-duration: 1s;     transition-timing-function: linear;     transition-delay: 2s;     /* Safari */     -webkit-transition-property:width;     -webkit-transition-duration:1s;     -webkit-transition-timing-function:linear;     -webkit-transition-delay:2s; } div:hover { width:300px; }

8、CSS3 @keyframes

div {     width:100px;     height:100px;     background:red;     animation:myfirst 5s;     -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst {     from {background:red;}     to {background:yellow;} } @-webkit-keyframes myfirst /* Safari and Chrome */ {     from {background:red;}     to {background:yellow;} } @keyframes myfirst {     0%   {background:red; left:0px; top:0px;}     25%  {background:yellow; left:200px; top:0px;}     50%  {background:blue; left:200px; top:200px;}     75%  {background:green; left:0px; top:200px;}     100% {background:red; left:0px; top:0px;} } div {     animation: myfirst 5s linear 2s infinite alternate;     /* Safari 与 Chrome: */     -webkit-animation: myfirst 5s linear 2s infinite alternate; } 上面是下面的简写 div {     animation-name: myfirst;     animation-duration: 5s;     animation-timing-function: linear;     animation-delay: 2s;     animation-iteration-count: infinite;     animation-direction: alternate;     animation-play-state: running;     /* Safari 与 Chrome: */     -webkit-animation-name: myfirst;     -webkit-animation-duration: 5s;     -webkit-animation-timing-function: linear;     -webkit-animation-delay: 2s;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: alternate;     -webkit-animation-play-state: running; }

设置页面不缓存 <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=”0″>

彻底让IE, FireFox, Chrome等浏览器下的a标签链接域键盘事件拜拜了。示例代码如下：

<a class="tab_a tab_on" style="pointer-events:none;">年终奖</a>

文字占满容器宽度，兼容性不好

<div>这世间唯有梦想和好姑娘不可辜负！<i></i></div> div{   width:500px;   border:1px solid red;   text-align: justify; } div i{   display:inline-block;   width:100%; }

(adsbygoogle = window.adsbygoogle || []).push({});