Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡

前言

持续学习总结输出中，今天分享的是Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡

---

背景图片大小

background-size:宽度 高度;

设置背景图片的大小

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的高度百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，知道刚好填满整个盒子没有空白

background连写拓展

 background:color image repeat position/size;

注意点：

• background-size和background连写同时设置时，需要注意覆盖问题

解决:

1. 要么单独的样式写连写的下面
2. 要么单独的样式写在连写的里面

文字阴影

text-shadow

给文字添加阴影效果，吸引用户注意

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
color	可选，阴影颜色

注意:
• 阴影可以叠加设置，每组阴影取值之间以逗号隔开

盒子阴影

box-shadow

给盒子添加阴影效果，吸引用户注意

参数	作用
h-shadow	必须，水平偏移量。允许负值
v-shadow	必须，垂直偏移量。允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

过渡

transition

让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验

参数	取值
过渡的属性	all：所有能过渡的属性都过渡、具体属性名如：width 只有 width有过渡
过渡的时长	数字 + s （秒）

注意点:

1. 过渡需要:默认状态 和 hover状态样式不同，才能有过渡效果
2. transition属性给需要过渡的元素本身加
3. transition属性设置在不同状态中，效果不同的
   .给默认状态设置，鼠标移入移出都有过渡效果
   .给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果

总结

最后分享一句话：

抱怨是在讲述你不要的东西，而不是你要的东西。
《不抱怨的世界》

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！！