1.CSS渐变
1.1线性渐变
.box{
width: 300px;
height: 300px;
background: linear-gradient(red,blue)
position渐变方向 color1 color2
不给方向 默认从上到下的顺序第一种颜色到第二种颜色依次渐变
linear-gradient(color1,color2,color3...)
linear-gradient(to bottom right,red,blue) 从上到下
to right从左到右
to right bottom 即从左上到右下 right和bottom的位置顺序不太重要
}
1.2径向渐变
.box {
width: 300px;
height: 300px;
background: radial-gradient(red,yellow,blue);
只给颜色不给任何值,均匀得径向渐变,从内到外
background: radial-gradient(red 20%, yellow 30%, blue 20%);
根据值给颜色
background: radial-gradient(circle, red 20%, yellow 30%, blue 20%);
第一个值设置为circle,即使盒子不是圆,渐变效果也是一个圆
}
2.CSS3字体
@font-face {
font-family: ywstyle;
/* 必须的 */
src: url(../fonts/fonts/shimesone_personal-webfont.eot);
src: url(../fonts/fonts/shimesone_personal-webfont.svg);
src: url(../fonts/fonts/shimesone_personal-webfont.ttf);
src: url(../fonts/fonts/shimesone_personal-webfont.woff);
/* 必须的,定义字体文件的路径 */
多个字体文件是为了兼容各个浏览器的,有不兼容的可以依次往后兼容
}
h1{
font-family: ywstyle;
font-size: 100px;
}
3.CSS文本效果
3.1文本阴影
h1{
text-shadow: 10px 10px 10px pink;
(第一个值阴影水平方向的位置,第二个值阴影垂直方向的位置)为必选
第三个值为阴影模糊距离,越大越模糊(如果设置为0则和文字一样清晰)
第四个值为阴影颜色
}
3.2超出部分省略号
.h1 {
width: 300px;
height: 40px;
border: 1px red solid;
overflow: hidden;
溢出隐藏
white-space: nowrap;
文本不会换行,在同一行继续
text-overflow: ellipsis;
用省略号来代表无法展示的文本
}