CSS3新增属性有哪些
一些最重要CSS3模块如下：
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
1.CSS3边框：
- border-radius：CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧，我们必须为每个圆角使用不同的图片，在 CSS3 中，创建圆角是非常容易的，在 CSS3 中，border-radius 属性用于创建圆角。border：2px solid;
- box-shadow：CSS3边框阴影。在 CSS3 中，box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;
- border-image：CSS3边框图片。通过 CSS3 的 border-image 属性，您可以使用图片来创建边框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
- background-size： 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。
-
length 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动) percentage 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 - background-origin ：属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。
2-1.CSS3渐变效果：
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
- 以下为一些实例，具体更多实例参考w3c
-
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);#grad { background-image: linear-gradient(#e66465, #9198e5); }#grad { height: 200px; background-image: linear-gradient(to right, red , yellow); }
#grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow); }
#grad { background-image: linear-gradient(-90deg, red, yellow); }
#grad { /* 标准的语法 */ background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }
3.CSS3文字效果：
- text-shadow：在 CSS3 中，text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;
- word-wrap :单词太长的话就可能无法超出某个区域，允许对长单词进行拆分，并换行到下一行：p{word-wrap:break-word;}
4.CSS3 2D转换：
transform：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。
- translate()：元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：transform：translate（50px,100px）;值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
- rotate()：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。
- scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
- skew():元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：transform:skew(30deg,20deg);值 skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。
- matrix() :
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
5.CSS3 3D转换：
- rotateX()：元素围绕其 X 轴以给定的度数进行旋转。transform：rotateX(120deg);
- rotateY()：元素围绕其 Y 轴以给定的度数进行旋转。transform：rotateY(120deg);
6.CSS3 过渡：当元素从一种样式变换为另一种样式时为元素添加效果。
- transition-property 过渡所用到的css名称
- transition-duration transition效果需要指定多少秒或毫秒才能完成
- transition-timing-function 指定transition效果的转速曲线
- transition-delay 定义transition效果开始的时候
7.CSS3动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
keyframes时表示规定了动画
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
div {
animation-name: mymove; 规定 @keyframes 动画的名称。
animation-duration: 5s; 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function: linear; 规定动画的速度曲线。默认是 "ease"。
animation-delay: 2s; 规定动画何时开始。默认是 0。
animation-iteration-count: infinite; 规定动画被播放的次数。默认是 1。
animation-direction: alternate; 规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-play-state: running; 规定动画是否正在运行或暂停。默认是 "running"。
/* Safari 与 Chrome: */
-webkit-animation-name: mymove;
-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; }
与上面的动画相同，但是使用了简写的动画 animation 属性：
animation 所有动画属性的间简写模式；
div { animation: mymove 5s linear 2s infinite alternate; /* Safari 与 Chrome: */ -webkit-animation: mymove 5s linear 2s infinite alternate; }
8.CSS3多列：
- column-count：属性规定元素应该被分隔的列数。
- column-gap：属性规定列之间的间隔。
- column-rule ：属性设置列之间的宽度、样式和颜色规则。
9.CSS3用户界面：
- resize：属性规定是否可由用户调整元素尺寸。
- box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
- outline-offset ：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
常用的实例介绍
1、
a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
a:hover {
box-shadow: 0 0 2px 1px rgba
(0, 140, 186, 0.5);
}
2、 如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：
img {
max-width: 100%;
height: auto;
}
3、 css3的各种滤镜修改所有图片的颜色为黑白 (100% 灰度):
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
4、css3的鼠标滑过过度
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: #4CAF50;
color: white;
}
4、css3实现鼠标滑过后出现箭头 配合伪元素一起
<button class="button" style="vertical-align:middle"><span>Hover </span></button>
.button {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
