一、文本相关样式
1. text-shadow 文本阴影
2.定义字体
二、 盒子阴影 box-shadow
.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. 线性渐变
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. 重复径向渐变
五、过渡 transition
1.transition-property过渡属性
2. transition-duration过渡持续时间
3. transition-timing-function过渡速度
4. transition-delay过渡延迟时间
简写
transition：
