css3 画弯曲的线 |css 文字自动变小

.line {
width: 400px;
height: 300px;
border: 1px solid black;
/* 关键属性 */
border-image: linear-gradient(to bottom right, red, blue) 1;
/* 前缀 */
-moz-border-image: linear-gradient(to bottom right, red, blue) 1;
-webkit-border-image: linear-gradient(to bottom right, red, blue) 1;
}

上面的代码中，大家创建了一个元素类名为“line”的 div 元素，给它设置了宽度、高度和边框颜色。下面的“border-image”属性就是关键所在了。大家使用了一个渐变色生成器，将颜色从红色渐变到蓝色，并通过“to bottom right”指定了渐变方向。最后的数字“1”表示映射到边框宽度中的比例，边框厚度为1个像素。这个属性告诉浏览器，大家想将这个渐变颜色映射到边框上，并由此生成一条曲线。

需要注意的是，由于不同浏览器对边框图片的支持程度不一，大家需要在代码中添加一些浏览器前缀，以确保其在不同浏览器下的兼容性。例如，“-moz-”前缀适用于Firefox浏览器，而“-webkit-”前缀适用于Chrome、Safari浏览器等Webkit内核的浏览器。

总之，CSS3可以让大家轻松地画出优美的弯曲线条。与此同时，CSS3还提供了很多其他的特效和样式，同样值得大家去探索和使用。