文本阴影 盒子阴影 卡片效果 文本溢出 2D转换

1.1文本阴影
text-shadow
eg：
div{
text-shadow:5px 5px 5px #ff000;
}
1.2盒子阴影
box-shadow
eg：
div{
text-shadow:10px 10px 5px #00000;
}
1.3在伪元素中添加阴影效果
1.4卡片效果
eg:
div1{
width: 250px;
height: 150px
color: white;
font-size: 30px;
text-align: center;
line-height: 150px;
background-color: #4CAF50;
}
div2{
margin:0;
width: 250px;
height: 50px;
font-size: 20px;
text-align: center;
line-height: 50px;
}
1.5文本溢出
css3文本溢出属性指定应向用户如何显示溢出内容
eg:
p.e1lipsis {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
white-space: nowrap;
text-overflow: e1lipsis;
}
如果需要保留两行文本，并省略溢出文本，则可以设置如下样式：
p.line-clamp {
width: 200px;
overflow: hidden;
border: 1px solid #cccccc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-overflow: ellipsis;
}
2. 2D转换
CSS转换 (transforms) 允许你移动、旋转、缩放和倾斜元素。
通过使用csstransform 属性，你可以利用以下2D 转换方法
方法            描述
translate()    从其当前位置移动元素(根据为 X 轴和Y轴指定的参数)。
rotate()        根据给定的角度顺时针或逆时针旋转元素。
scale()          增加或减少元素的大小(根据给定的宽度和高度参数)。
scalex（)       增加或减少元素的宽度。
scaleY（）     增加或减少元素的高度。
skewx（）     使元素沿X轴倾斜给定角度。
skewY（）     使元素沿Y轴倾斜给定角度。
skew（）      使元素沿X和Y轴倾斜给定角度
matrix（）     把所有2D变换方法组合为一个。
2.1translate() 方法
eg：
div{
transform: translate(100px，40px);
}
2.2rotate() 方法
rotate(）方法根据给定的角度顺时针或逆时针旋转元素
eg：
把<div>元素顺时针旋转20度
.rotate-positive {
transform: rotate(20deg);
}
2.3scale()方法
scale(方法增加或减少元素的大小(根据给定的宽度和高度参数)。
eg：
把<div>元素增大为其原始宽度的两倍和其原始高度的三倍
.scale-big {
transform: scale(2，3);
}
2.4 scaleX()方法
scalex(方法增加或减少元素的宽度
eg：
把<div> 元素增大为其原始宽度的两倍
div {
transform: scaleX(2);
}
2.5 scaleY()方法
scaleY(方法增加或减少元素的高度
eg：
把<div>元素增大到其原始高度的三倍:
div{
transform: scaleY(3);
}
2.6 skewX()方法
skewx0方法街元素沿X轴倾斜给定角度
eg：
把 <div>元素沿X轴倾斜20度
div{
transform: skewX(20deg);
}
2.7skewY()方法
skewY(方法使元素沿Y轴倾斜给定角度
eg:
把 <div>元素沿Y轴倾斜20度:
div{
transform: skewY(20deg);
}
2.8 skew()方法
skew0方法使元素沿X和Y轴倾斜给定角度。
eg:
使<div>元素沿X轴倾斜20 度，同时沿Y轴倾斜10度
div{
transform: skew(20deg， 10deg);
}
2.9 matrix()方法
matrix方法把所有2D变换方法组合为一个。
matrix()方法可接受六个参数，其中包括数学函数，这些参数使你可以旋转、缩放、移动(平移)和倾斜元素。
参数如下: matrix(scaleX), skewY(), skewX(), scaleY(),translateX(), translateY()
eg:
div{
transform: matrix(1，-0.3，0，1，0，0);
}