CSS3常用属性实现的效果总结

在我们学习了CSS的基本用法后，就可以使用CSS编写基本的页面效果了，然而CSS3里面也增加了好多新的特性，它可以帮助我们实现更多复杂的页面效果，能够提高效率和降低复杂度，下面就来学习总结一下经常会用到的一些效果。

圆角

border-radius 属性可以给任何元素制作圆角。

border-radius: 10px; 一个值代表四个角的值都相等。

border-radius: 10px 20px; 两个值代表左上和右下角，右上和左下角。

border-radius: 10px 20px 30px; 三个值代表左上角, 右上角和左下角，右下角。

border-radius: 10px 20px 30px 40px; 四个值代表左上角，右上角，右下角，左下角。

.radius {
    width: 100px;
    height: 100px;
    border-radius: 10px 20px; // 圆角属性
}

背景

background 背景属性，能够控制背景元素。

background-image 属性，添加背景图片。

background-size 属性，指定背景图像大小。

background-origin 属性，指定背景图像的位置区域。包含的值（content-box，border-box，padding-box）

span {
    background-image: url(xxx.jpg);
    background-size: 100% 100%;
    background-origin: content-box;
}

边框

box-shadow 属性，为元素盒子添加阴影。

语法：

box-shadow: h-shadow（水平阴影位置） v-shadow（垂直阴影位置） blur（模糊距离） spread（阴影大小） color（颜色） inset（从外到内）; 

border-image 属性，边框上使用图像显示。

语法：

border-image: souce（图片路径） slice（图片边框向内偏移）width（图片边框的宽度） outset （边框图像区域超出边框的量） repeat（图像边框平铺方式）

.box-img{
    border-image: url(xxx.png) 30 round;
}

文本

text-overflow 属性，文本溢出的内容显示方式。

word-wrap 属性，文本长的不可分割的单词进行分割换行方式。

text-wrap 属性，文本换行规则。

实现单行文本溢出省略号显示：

.text-more {
    width: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

转换效果

转换主要包括对元素的移动，缩放，转动，拉伸。

translate(x,y) 根据元素左上角（x, y）的值，对元素位置进行移动。

rotate(x) 根据给定的度数对元素顺时针旋转，也可逆时针旋转。

scale(x,y)  根据给定的（x, y）的值，对元素增加或减小的大小倍数。

rotateX(x) 根据给定的度数，对元素进行围绕 X 轴旋转。

rotateY(x) 根据给定的度数，对元素进行围绕 Y 轴旋转。

.box {
    transform: translate(50px, 50px); //水平向右移动50px，垂直向下移动50px
    transform: rotate(90deg); // 顺时针旋转90度
    transform: scale(2,3);  // 宽度扩大2倍，高度扩大3倍
    transform: rotateX(180deg); //绕X轴旋转 180 度
    transform: rotateY(180deg); //绕Y轴旋转 180 度
}

过度效果

过度就是元素从一种样式逐渐改变为另一种样式的效果。这个实现过程需要添加效果的CSS属性和效果的持续时间。

transition 属性，允许CSS的属性在一定的时间平滑的过度，比如鼠标点击，移上元素，获得焦点等触发。

语法：

transition: property（过渡的属性名称） duration（过渡效果的时间） timing-function（过渡效果的时间曲线） delay（开始的延迟时间）

.content {
    width: 100px;
    height: 100px;
    transition: width 2s linear 0.5s; // 延迟0.5秒后，宽度变化执行2秒
}
// 鼠标移上元素，宽度变宽
.content:hover {
    width: 200px;
}