致自己：CSS学习笔记六
1、CSS背景图片大小
1、作用：设置背景图片的大小
2、语法：background-size：宽度 高度；
3、取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 使用简单方便，比较常用 |
| 百分比 | 相当于盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的大小 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
4、background连写：
background：color image repeat position/size；background-size和background连写同时设置，要主要覆盖问题，要么单独的样式写在连写的下面，要么单独的样式写在连写的里面。
5、代码示例：
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>.box {width: 400px;height:300px;background-color: pink;background-image: url(./images/1.jpg);background-repeat: no-repeat;/* background-size: 300px; *//* background-size: 50%; *//* 如果图的宽或高与盒子的尺寸相同了,另一个方向停止缩放 -- 导致盒子可能有留白 */background-size: contain;/* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 *//* background-size: cover; *//* 实际开发中, 图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */}style>
head>
<body><div class="box">div>
body>
html>
2、文字阴影
1、作用：给文字添加阴影效果
2、属性名：text-shadow
3、取值：
| 参数 | 说明 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v-shadow | 必须，垂直偏移量，允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
| spread | 可选，阴影扩大 |
| inset | 可选，将阴影改为内部阴影 |
4、注意点：阴影可以叠加，每组阴影取值之间使用逗号隔开
5、代码示例：
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div {width: 200px;height: 200px;background-color: pink;/*box-shadow: 5px 10px 20px 30px orange inset;inset：表示内置阴影，外置阴影不用额外添加属性，以下写法会导致属性报错box-shadow: 5px 10px 20px 30px orange outset;*//* 不添加额外属性，默认是外置阴影 */box-shadow: 5px 10px 20px 30px orange;}style>
head>
<body><div>div>
body>
html>
3、过渡
1、作用：让元素的样式慢慢的变化，常配合hover使用，增强网页的交互体验
2、属性名：transition
3、常见取值：
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all：所有能过渡的属性都过渡，具体属性名，比如width，只有width属性过渡 |
| 过渡的时长 | 数字+s |
4、注意点：
- 过渡需要：默认状态和hover状态的样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同的状态中，效果不同
- 给默认状态设置，鼠标移入、移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
5、代码示例：
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>div {width: 200px;height: 200px;background-color: pink;/* 宽度变为600px，花费1S 背景颜色变为红色，花费2s*//* transition:width 1s,background-color 2s; *//* 多个属性直接写all */transition: all 2s;}div:hover {width: 600px;background-color: red;}style>
head>
<body><div>div>
body>
html>
学的差不多就这些，完结撒花！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！