目录
一、阴影
1、文本阴影 text-shadow
text-shadow: h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值。 |
v-shadow | 必需,垂直阴影的位置,允许负值。 |
blur | 可选,模糊的距离 |
color | 可选,阴影的颜色 |
/*text-shadow: h-shadow(必需,水平阴影的位置,允许负值 正值阴影在右)
v-shadow(必需,垂直阴影的位置,允许负值 正值阴影在下)
blur(阴影模糊的距离,模糊半径)
color;
中间用(逗号)隔开,可以加多重阴影*/
.box {
font-size: 50px;
text-shadow: 10px 20px 5px yellow,
15px 30px 5px green,
20px 40px 5px pink;
/* 多重阴影 */
}
2、边框阴影 box-shadow
box-shadow 用于向方框添加阴影
属性值:box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
值 | 描述 |
---|---|
x轴偏移量 | 必需,水平阴影的位置,允许负值。 |
y轴偏移量 | 必需,垂直阴影的位置,允许负值。 |
阴影模糊半径 | 可选,模糊距离 |
阴影扩展半径 | 可选,阴影尺寸 |
阴影颜色 | 可选,阴影的颜色。省略默认为黑色 |
投影方式 | 可选,设置inset时为内部阴影方式,省略默认为外阴影方式 |
.box {
width: 300px;
height: 100px;
background-color: pink;
box-shadow: 10px 10px 5px green;
}
二、自定义字体
1、定义字体
属性值:@font-face{
font-family : 自定义字体名称;
src : url("字体路径")
}
/* 定义字体 */
@font-face {
font-family: "maoti";
src: url("fonts/maozedong.ttf");
}
2、使用字体
属性值:.box{
font-family : 自定义字体名称;
}
/* 使用字体 */
.box {
font-family: "maoti";
font-size: 50px;
}
三、圆角
属性值:border-radius
.box{
width: 200px;
height: 200px;
background-color: pink;
border-radius: 10px; /* 四个角的圆角值是一样的 */
border-radius: 10px 30px; /* 值一左上右下 值二右上左下 对角 */
border-radius: 10px 25px 30px; /* 值一左上 值二右上左下 值三右 下 */
border-radius: 10px 25px 30px 50px; /* 值一左上 值二右上 值三右下 值四左下 顺时针*/
border-radius: 50%; /* 椭圆 */
}
四、渐变
1、线性渐变
(1)属性值:background-image : linear-gradient(方向 , 颜色1 颜色1位置 , ....)
(2)方向:
渐变角度:单位deg 例如:45deg
to 英文单词 to right 从左向右渐变
(3)颜色位置:
可以是数值+单位
可以是 百分比
background-image: linear-gradient(45deg, red,pink);
background: linear-gradient(red 0%,pink 50%); /*image也可以省略不写*/
background-image: linear-gradient( to right, red 0px,pink 50px); /* 从左到右 */
2、重复线性渐变
属性值:background-image : repeating-linear-gradient()
background-image: repeating-linear-gradient(to bottom right, red,pink); /* 从左上到右下 */
3、径向渐变
属性值:background-image : radial-gradient(形状 半径 圆心位置,颜色1 颜色1位置 , ...)
background: radial-gradient(circle closest-corner at 40px 60px, #f00 0%,#00f 50%);
(1)shap 形状
- ellipse 默认 椭圆形
- circle 圆形
(2)半径 size 渐变大小
- farthest-corner 默认 指定径向渐变的半径长度是从圆心到离圆心最远的角
- farthest-side 指定径向渐变的半径长度是从圆心到最离圆心远的边
- closest-corner 指定径向渐变的半径长度是从圆心到离圆心最近的角
- closest-side 指定径向渐变的半径长度是从圆心到离圆心最近的边
(3)position 圆心位置
- at x位置 y位置
- x,y取值:数值+单位、百分比、英文单词left right center top bottom
4、重复径向渐变
属性值:background-image : repeating-radial-gradient()
background: repeating-radial-gradient(circle closest-corner at top center, #f00 0%,#00f 50%);
五、过渡
1、过渡属性
属性值:transition-property:;
值: 属性名 多个属性名之间有逗号隔开 或 all
transition-property: width, height;
transition-property: all;
2、过渡持续时间
属性值:transition-duration: ;
单位:秒s 或 毫秒ms
transition-duration:0.5s ;
transition-duration: 500ms;
/* 1秒=1000毫秒 */
3、过渡速度
属性值:transition-timing-function: ;
值 | 详解 |
---|---|
ease | 默认 逐渐变慢 |
linear | 匀速 |
ease-in | 加速 |
ease-out | 减速 |
ease-in-out | 先加速后减速 |
cubic-bezier(x1,y1,x2,y2) | 贝塞尔曲线 |
transition-timing-function: linear;
4、过渡延迟时间
属性:transition-delay
单位:秒s 或 毫秒ms
transition-delay: 1s;
5、缩写:
属性值:transition : transiton-propery值 transition-duration值 transition-timing-function值 transition-delay值;