一： background- 新属性
1.
如何给同一个元素定义两个背景图像
background-image:url(../images/t.png),url(../images/a.png)
background-position:left center , right center;
background-repeat:no-repeat;
2.
指定背景图像的位置区域(了解)
background-Origin 指定背景图像的位置区域,可以位于 border 、padding 、也可以在content
3.
背景裁剪属性是从指定位置开绘制(了解)
background-clip
二： 渐变
(浏览器支持不是很好,可能无法显示时用: -ms- -o- -m0z- -webkit-)
分两种:
线性渐变:linear-gradient (横着) 至少定义两种颜色值
径向渐变radial -gradient （竖着）
1. 线性渐变：
写法: background:linear-gradient(red,blue); 至少两种颜色
线性渐变,颜色从左到右的写法
background: linear-gradient(to right,red,blue); to right 定义了 第一个颜色向 右 过渡。
background:linear-gradient(to bottom right,red,blue); 对角渐变, 第一个颜色向 右下过渡。
同样,可以使用角度,来做渐变效果。 写法:
background:linear-gradient(角度,red，blue);
即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。
重复的线性渐变 %定义颜色的宽度
background: repeating-linear-gradient(to right,red,blue 10%,green 20%)
2. 径向渐变:(理解为有某个点向四周扩散)
background: radial-gradient(red,yellow,green);
也可加入%定义大小
background: radial-gradient(red 20%,yellow 50%,green 3%);
径向渐变有两个值,规定的渐变是圆形还是椭圆,默认值市椭圆形
circle 定义圆形, 默认值 ellipse 椭圆形
background: radial-gradient(red,yellow,green);
重复的径向渐变
background:repeating-radial-gradient(red,yellow,blue)
三： 文本效果
text-shadow box-shadow text-overflow word-wrap word-break
1.text-shadow: 与box-shadow作用差不多, 应以了 文本的阴影效果,可以做成文字的3D感觉
如何控制文本的溢出:
text-overflow:hidden; 文本溢出隐藏
text-overflow:ellipsis; 定义文本多出的内容省略号显示
文本换行:
word-wrap:break-word; 例如:英文,换行时,整个单词换行。
word-wrap:break-all; 单词拆分换行。
四： 字体
@font-face
网友评论