标签：web ace 使用 ... 针对 clip 一个 垂直 png
//向右倾斜60度
transform:rotate(60deg);
-ms-transform:rotate(60deg); /* IE 9 */
-webkit-transform:rotate(60deg); /* Safari and Chrome */
//圆角化对象，当值到大对象一半时为正圆
border-radius:25px;
四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值： 四个圆角值相同
//对象阴影;默认情况下外阴影；(投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)
box-shadow: 10px 10px 5px #888888;
//图片边框;round:复制部分内容填充; stretch:拉伸部位填充针对div
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
//背景图片直接设置属性；100%：拉伸到整个区域
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size:100% 100%
//由内到外三层放置背景图片
content-box, padding-box,和 border-box区域内可以放置背景图像
//位置背景的裁剪
background-clip: padding-box;
background-clip: content-box;
//颜色渐变（红和蓝）方向；颜色1；颜色2；颜色3...；方向可以是角度：90deg
//background: linear-gradient(direction, color-stop1, color-stop2, ...);
//(red 10%, green 85%, blue 90%);指定颜色百分比后渐变颜色节点会消失
//(left, rgba(255,0,0,0), rgba(255,0,0,1));渐变的透明属性只能用rgba设置
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
//repeating使渐变重复
background: repeating-linear-gradient (red, green, blue);
//径向渐变 - 颜色结点均匀分布（默认情况下）；圈状
background: radial-gradient(red, green, blue);
//径向渐变 为圆形//折合前面属性加上对应前缀即可
background: radial-gradient(circle, red, yellow, green);
//指定的文字水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
text-shadow: 5px 5px 5px #FF0000;
//box-shadow 属性适用于盒子阴影，水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
width:300px;
height:100px;
box-shadow: 10px 10px 5px #888888;
//阴影的卡片模式
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
//超出部分隐藏
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
//文本超出换行
word-wrap:break-word;
//单词拆分换行
word-break:keep-all;
//使用自己下载的字体 注意兼容性
@font-face
{
font-family: myFirstFont;
src: url(‘Sansation_Light.ttf‘)
,url(‘Sansation_Light.eot‘); /* IE9 */
}
div{font-family:myFirstFont;}
//旋转30度角 3条语句效果一样
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
//translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
//rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
//scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数：
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
//包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
//matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
//rotateX()方法，围绕其在一个给定度数X轴旋转的元素。
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
//rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
//鼠标经过的多样式过度，帅气
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
div:hover {
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
transform: rotate(180deg);
}
//过度等待反应时间设置
transition:width 1s linear 2s;
//红到黄5秒时间渐变
div
{ width:100px;
height:100px;
background:red;
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}
//百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。注意对应浏览器
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}
@keyframes myfirst
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
@-o-keyframes myfirst /* Opera */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
//改变了背景色和位置，实现方框式移动
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}
@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;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
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;}
}
//移动加渐变整体效果，运行myfirst动画，设置所有的属性：
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation: myfirst 5s linear 2s infinite alternate;
/* Safari 与 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
}
@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;}
}
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
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;}
}
//报纸类型分文本格式,count对应的是分几个，gap对应的之间间隔，rule-style对应两列之间的边框，rule-width对应边框厚度
rule-color对应边框颜色
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;
-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
-moz-column-rule-width: 1px; /* Firefox */
column-rule-width: 1px;
-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
-moz-column-rule-color: lightblue; /* Firefox */
column-rule-color: lightblue;
}
<div class="newspaper">****</div>
//直接简单设置
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
//指定跨越几个边框
h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}
<div><h2></h2></div>
//column-width 属性指定了列的宽度。
div {
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
标签：web ace 使用 ... 针对 clip 一个 垂直 png
原文地址：http://www.cnblogs.com/zhaozhou/p/7375546.html
