一、文本相关样式
1. text-shadow 文本阴影
text-shadow ： 水平方向阴影 垂直阴影 [模糊距离] [阴影颜色];
2.定义字体
先 定义字体
@font-face{
font-family：字体名称；
src：url（字体路径）；
}
再 使用字体
选择器{
font-family：使用字体名称;
}
二、 盒子阴影 box-shadow
box-shadow： 水平阴影 垂直阴影 [模糊距离] [阴影扩展半径] [阴影颜色] [投影方式]
阴影颜色：默认为黑色
投影方式：默认为外投影，若设置为inset，则为内投影
.text {
width: 200px;
height: 100px;
background-color: pink;
box-shadow: 6px 6px 6px 5px rgba(0,0,0,0.6) inset;
}添加内阴影效果如下： 添加外阴影效果如下：
三、圆角 border-radius
.box {
width: 200px;
height: 200px;
background-color: palegoldenrod;
border-radius: 20px;/* 四个圆角都一样 */
border-radius: 20px 30px;
/* 值1左上角和右下角 值2是右上角和左下角*/
border-radius: 20px 50px 30px;
/* 值1左上角 值2是右上角和左下角 值3是右下角*/
border-radius: 0 50px 30px 70px;
/* 值1左上角 值2是右上角 值3是右下角 值4是左下角*/
}
数值越大，弧度越大
四、渐变background-image
1. 线性渐变
background-image：linear-gradient（渐变角度，颜色1 颜色1位置，颜色2 颜色2位置，.....）
渐变角度：单位是deg 例如：30度：30deg
可以用英文单词来表示渐变方向 例如：to right 从左到右线性渐变
2. 重复线性渐变
background-image：repeating-linear-gradient（渐变角度，颜色1 颜色1位置，颜色2 颜色2位置，.....）
3. 径向渐变
background-image：radial-gradient（形状shape，size at position，颜色1 颜色1位置，颜色2 颜色2位置，.....）
shape 形状 ellipse 默认 椭圆 circle 圆形
size 渐变大小：
farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position 圆心位置： at x y
x y 取值：1.英文单词left right center top bottom
2.数值+单位
3.百分比
下面我们可以利用上面学到的知识做一个球：
<style type="text/css">
.box {
width: 400px;
height: 400px;
border-radius: 50%;
background-image: radial-gradient(#fff, #0f0f0f);
}
</style>
</head>
<body>
<div class="box">
4. 重复径向渐变
background-image：repeating-radial-gradient（形状shape，size at position，颜色1 颜色1位置，颜色2 颜色2位置，.....）
五、过渡 transition
1.transition-property过渡属性
多个属性之间有逗号隔开
或 用all表示
2. transition-duration过渡持续时间
单位：m秒 或 ms 毫秒
3. transition-timing-function过渡速度
ease 默认 逐渐变慢
linear 匀速
ease-in 加速
ease-out 减速
ease-in-out 先减速后加速
cubic-bezier （x1， y1，x1，y2） 自定义，贝塞尔曲线
4. transition-delay过渡延迟时间
简写
transition：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
