一、阴影
1.文本阴影:text-shadow
属性为文本添加阴影,在文本中添加一个或多个阴影。
text-shadow: -2px 5px 3px skyblue, 0px 30px 92px rgba(228, 49, 49, 1),0px 46px 134.83px rgba(214, 144, 144, 1);
/* text-shadow:; */
/* 值分别为水平方向 垂直方向 模糊半径 阴影颜色 */
/* 阴影效果可以多重叠加 中间用逗号隔开 */
tips: 阴影效果可以多重叠加,叠加时中间用逗号隔开
2.边框阴影:box-shadow
属性应用阴影于元素,向一个元素添加一个或多个阴影。
/* 值分别为 x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] */
box-shadow: 10px 10px 5px 10px lightblue inset;
二、圆角 border-radius
1. border-radius
属性定义元素角的半径 ,通过该属性,可以实现任何元素的“圆角”样式。
2.简写形式
属性可以接受一到四个值。规则如下:
四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于:左上角、右上角、右下角、左下角)
三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角,第二个值用于右上角和左下角,第三个用于右下角)
两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角,第二个值用于右上角和左下角)
一个值 - border-radius: 15px;(该值用于所有四个角,圆角都是一样的)
/* 四个角的圆角都一样 */
border-radius: 10px;
/* 值1:左上和右下 值2:右上和左下 */
border-radius: 10px 50px;
/* 值1:左上 值2:右上和左下 值3:右下角 */
border-radius: 10px 20px 50px;
/* 值1:左上 值2:右上 值3:右下 值4:左下角 */
border-radius: 10px 50px 30px 20px;
三、自定义字体
1.基本形式
(1)定义字体
@font-face{
font-family : 字体名称;
src : url("字体路径")
}
(2)使用字体
.box{
font-family : 字体名称;
}
2.上机实例
/* 外部字体 */
/* 定义字体 */
@font-face {
font-family:zhengui;
src: url("fonts/PangMenZhengDaoZhenGuiKaiTi-2.ttf");
}
/* 使用字体 */
.box2{
width: 200px;
margin: 0 auto;
font-family: zhengui;
3.运行效果
四、渐变
1.线性渐变
显示两种或多种指定颜色之间的平滑过渡。
.box2{
/* 线性渐变 */
background-image:linear-gradient(45deg);
/* 45度角渐变 */
background-image:linear-gradient(45deg,lightblue,pink);
/* 45度角粉蓝渐变 */
background-image: linear-gradient(to bottom right,lightblue,pink);
/* 从左上到右下渐变 */
/* repeating 重复线性渐变 */
}
2.径向渐变
.box3{
width: 300px;
height: 300px;
margin: 0 auto;
/* 径向渐变 */
background-image:radial-gradient(circle farthest-side at 10px 20px,gold,skyblue);
background-color: lightblue;
}
3.运行效果
五、过渡
1.基本形式
transition:过渡属性 过度持续时间 过渡速度 过渡延迟时间;
2.属性
(1)transition-property 过渡属性
(2)transition-duration 过渡持续时间
(3)transition-timing-function 过渡速度
- ease 默认 逐渐变慢
- linear 匀速
- ease-in 加速
- ease-out 减速
- ease-in-out先加速后减速
- cubic-bezier(x1,y1,x2,y2) 贝塞尔曲线
(4)transition-delay 过渡延迟时间
3.上机实例
.box5{
width: 100px;
height: 100px;
background-image:radial-gradient(circle farthest-side at 10px 20px,pink,skyblue);
transition:all 0.5s linear 0.3s;
/* transition-property 过渡属性 若同时过渡多个属性 用逗号隔开 所有属性都需要过渡的时候,用all代替 */
/* transition-duration 如果属性之间持续时间不同 用逗号隔开持续时间 */
/* transition-timing-function 过渡速度 默认为ease 逐渐慢下来 */
/* 默认 逐渐变慢 */
transition-timing-function: ease;
/* 匀速 */
transition-timing-function: linear;
/* 加速 */
transition-timing-function: ease-in;
/* 减速 */
transition-timing-function: ease-out;
/* 先加速再减速 */
transition-timing-function: ease-in-out;
}
六、面试题
优雅降级和渐进增强
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。