本文详细介绍了前端文本阴影、裁剪、3D变形和过渡属性的使用方法，包括text-shadow、clip、transform系列（translate、scale、rotate、skew、matrix、matrix3d）及transform-origin、transform-style、perspective等属性。此外，还涵盖了transition系列属性（transition-property、transition-duration、transition-timing-function、transition-delay），以及各种过渡效果的实现。
文本阴影
//正值阴影
text-shadow: 1px 1px 1px red;
//负值阴影
text-shadow: -1px -1px 1px red;
//多重阴影叠加
text-shadow:0px 0px 0 rgb(188,178,188),
1px 0px 0 rgb(173,163,173),
2px 0px 0 rgb(157,147,157),
3px 0px 0 rgb(142,132,142),
4px 0px 0 rgb(126,116,126),
5px 0px 0 rgb(111,101,111),
6px 0px 0 rgb(95,85,95),
7px 0px 0 rgb(79,69,79),
8px 0px 7px rgba(0,0,0,0.35),
8px 0px 1px rgba(0,0,0,0.5),
0px 0px 7px rgba(0,0,0,0.2);
文本裁剪
clip默认值，裁剪文本时不添加省略号
ellipsis裁剪文本时添加省略号
tranform
tranform指定应用的变换功能
tranform-origin指定变换起点
none无变换
【translate(长度值或百分数值)translateX(长度值或百分数值)translatY(长度值或百分数值)】在水平方向、垂直方向或两个方向上平移元素
【scale(数值)scaleX(数值)scaleY(数值)】在水平方向，垂直方向或两个方向上缩放元素
rotate(角度)旋转元素 默认情况下以中心点作为旋转角度
【skew(角度)skewX(角度)skewY(角度)】在水平方向，垂直方向或两个方向上使元素倾斜一定角度
matrix(
最低0.47元/天 解锁文章
扫一扫
2201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
