常用CSS3 一目了然

1.css3边框

圆角边框 border-radius: 5px;(圆角半径)

边框阴影 box-shadow: 10px 10px 5px red;(水平阴影 垂直阴影 模糊距离 阴影的尺寸 阴影颜色 内阴影)

边框图片 border-image: url() 30 30 round; -moz-border-image:..;-webkit-border-image:...;-o-border-radius:..;

2.CSS3背景

```background-size: 100%; 100%；```

background-origin 定位区域 （padding-box border-box content-box）

3.CSS3文本效果

文本阴影 text-shadow: 5px 5px 5px red; (水平阴影 垂直阴影 模糊距离 阴影的颜色)

文本换行 word-wrap: break-word; //对长单词进行拆分、并换行

文本溢出 text-overflow；断点字换行 word-break: break-all;文本换行 text-wrap: none;

4.CSS 2D字体

5.CSS 转换

{transform: rotateX(120deg);-webkit-transform: rotateX(120deg);/* Safari 和 Chrome */-moz-transform: rotateX(120deg);

2D转换属性：

translate(50px 100px) // 距离left top 移动  translateX(50px) translateY(50px)

rotate(30deg)//顺时针旋转30度

scale(2,4)//尺寸变为原来的宽的2倍，高的4倍 scaleX(2) scaleY(4)

skew(30deg, 20deg)//根据X轴 Y轴翻转 skewX30deg) skewY20deg)

matrix()//matrix() 方法需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素。

3D转换属性：

transform: rotateX(120deg);

transform: rotateY(20deg);

6.CSS3过渡

{transition: width 2s;-moz-transition: width 2s;/* Firefox 4 */-webkit-transition: width 2s;/* Safari 和 Chrome */-o-transition: width 2s;/* Opera */}

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上;规定效果的时长

7.CSS3动画

@keyframe定义动画

@keyframe myfirst{

    form{background: red;}

    to{background: green;}

}

div{

anination: myfirst 5s；

}