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);
}
文本阴影 盒子阴影 卡片效果 文本溢出 2D转换
最新推荐文章于 2024-08-24 13:47:49 发布