Web前端20：CSS新增属性—-渐变、文本效果和字体

CSS3渐变（Gradients）

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

渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的

CSS3 定义了两种类型的渐变：

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

线性渐变相关属性：background-image

线性渐变

从上到下
语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

实例：

background-image: linear-gradient(#e66465, #9198e5);

从左到右
实例：

background-image: linear-gradient(to right, red , yellow);

对角
实例：

background-image: linear-gradient(to bottom right, red , yellow);

使用角度
语法：

background-image: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

background-image: linear-gradient(0deg, red, yellow);background-image: linear-gradient(90deg, red, yellow);background-image: linear-gradient(180deg, red, yellow);background-image: linear-gradient(-90deg, red, yellow);

使用多个颜色节点

background-image: linear-gradient(red, yellow, green);

使用透明度（transparent）

background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

重复的线性渐变

background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

CSS3 径向渐变

颜色节点均匀分布
语法：

background-image: radial-gradient(yellow, white, orange);

颜色节点不均匀分布

background-image: radial-gradient(yellow 5%, white 15%, orange 60%);

设置形状

shape 参数

定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

background-image: radial-gradient(circle, red, yellow, green);

椭圆形 Ellipse（默认）：

圆形 Circle：

不同尺寸大小关键字的使用

size 参数

定义了渐变的大小。它可以是以下四个值：

• closest-side
• farthest-side
• closest-corner
• farthest-corner

background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);

closest-side：

farthest-side：

closest-corner：

farthest-corner（默认）：

重复的径向渐变

repeating-radial-gradient()

函数用于重复径向渐变：

background-image: repeating-radial-gradient(red, yellow 10%, green 15%);

CSS3 文本效果

CSS3中包含几个新的文本特征。

• text-shadow ——适用于文本阴影

text-shadow: 5px 5px 5px #FF0000;

• box-shadow ——适用于盒子阴影

h-shadow v-shadow blur spread color insect
水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影

实例：

background-color:yellow;box-shadow: 10px 10px 5px #888888;

• text-overflow ——指定应向用户如何显示溢出内容
  三件套：

white-space:nowrapoverflow:hidden;text-overflow:ellipsis  //溢出的内容将以...代替text-overflow:clip //溢出的内容看不见

• word-wrap ——自动换行属性允许强制文本换行

normal

只在允许的断字点换行（浏览器保持默认处理）。

break-word

在长单词或 URL 地址内部进行换行。

word-wrap:break-word;

• word-break——换行属性指定换行规则

normal

使用浏览器默认的换行规则。

break-all

允许在单词内换行。

keep-all

只能在半角空格或连字符处换行。

word-break:keep-all;word-break:break-all;

CSS3字体

1. 如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)

@font-face{font-family: myFirstFont;src: url(...);		// ...为字体具体形式}div{font-family:myFirstFont;}

1. 使用粗体文本必须添加另一个包含粗体文字的@font-face规则：

@font-face{font-family: myFirstFont;src: url(...);  // ...为字体具体形式font-weight:bold;}

CSS3字体描述