css3 文字特效 |css文字围绕图片四周

/* 文本阴影 */
text-shadow: 2px 2px 4px #000;
/* 文本描边 */
-webkit-text-stroke: 2px #000;
text-stroke: 2px #000;
/* 多行文本 */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
/* 旋转文本 */
transform: rotate(-45deg);
/* 文本渐变 */
background: -webkit-linear-gradient(#333, #fff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 滚动文本 */
overflow: hidden;
white-space: nowrap;
animation: marquee 5s linear infinite;
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}

上述代码展示了CSS3中一些常用的文字特效，包括文本阴影、文本描边、多行文本、旋转文本、文本渐变、滚动文本等。

其中，文本阴影和文本描边可以给文本增加立体感和厚重感，多行文本可以用于限制文本行数和控制文本溢出，旋转文本可以用于设计特殊的文字排版效果，文本渐变可以用于制作炫酷的颜色切换字体，滚动文本则可以用于制作动态文字广告。

除上述特效外，CSS3还拥有丰富的其他文字特效，如字体变形、文字空心、文字描边动画等等，可以为网页设计师提供更多的创意和发挥空间。