css如何让文字有弧度 |css渐变ie兼容代码

方法一：使用text-path属性

曲线路径代码：CSS代码：
textPath {
text-anchor: start;
font-size: 24px;
font-weight: bold;
fill: #4CAF50;
stroke: none;
}
textPath:hover {
fill: #2196F3;
}
文本代码：Hello World

方法二：使用-webkit-shape-outside属性

CSS代码：
.shape {
-webkit-shape-outside: circle(50%);
shape-outside: circle(50%);
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #2196F3;
}
文本代码：
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae sapien ultricies, egestas turpis sit amet, fringilla erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur gravida iaculis tempus. Sed vitae nibh leo. Praesent in ipsum scelerisque, auctor ligula a, hendrerit magna. Donec commodo nulla vel molestie iaculis. Nam varius orci quis mattis pretium. Donec tempor ex vel massa sodales venenatis.

方法三：使用path文字路径

曲线路径代码：CSS代码：
path {
fill:none;
stroke:none;
}
path:focus {
stroke-width: 5px;
stroke: #2196F3;
}
文本代码：Hello World

以上是三种不同的方法，只要适用于大家的设计需求即可，希望对你有所帮助。