CSS3渐变

CSS3 渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变 Linear Gradients

从上到下渐变

background-image: linear-gradient( 颜色, 颜色); 
//可以有多个颜色。默认是从上到下。

从左到右渐变

background-image: linear-gradient( to tight , 颜色, 颜色); 
//可以有多个颜色。

从左上到右下渐变

background-image: linear-gradient( to bottom right ，颜色, 颜色); 
//可以有多个颜色。

对角渐变 需要 deg 单位

background-image: linear-gradient( 90deg ，颜色, 颜色); 
//可以有多个颜色。

透明度

 background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
//可以有多个颜色。

重复性：repeating-linear-gradient

 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
//可以有多个颜色。

径向渐变 Radial-Gradients

background-image: radial-gradient(形状（shape） 大小 （size） at 定位（position） , 开始颜色 （start-color）, ..., 结束颜色（last-color）);

1. shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
2. size 参数定义了大小。closest-side 、farthest-side、closest-corner、farthest-corner。
   

重复性径向渐变：repeating-radial-gradient

  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
//可以有多个颜色。

拓展：文本/单词换行方式

p{
//文本
 word-wrap: break-word:
 //单词
 word-break: keep-all:
}

拓展：设置第三方字体

@font-face{
font-family:myfirstfont;
src:url("......wolf");
}
p{
font-family:myfirstfont;
}

---

• 失联

最后编辑时间 2023，09，16 ；12：13