写在前面
Hello大家好， 我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！
如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！
目录
写在前面
1. 新增盒模型相关属性
1.1 box-sizing 怪异盒模型
1.2 resize 调整盒子大小
1.3 box-shadow 盒子阴影
1.4 opacity 不透明度
2. CSS3 新增背景属性
2.1 background-origin
2.2 background-clip
2.3 background-size
2.4 backgorund 复合属性
2.5 多背景图
结语
【往期回顾】
【CSS3系列】第一章 · CSS3新增的三种基本属性
【其他系列】
【HTML5系列】
【HTML4系列】
【CSS2系列】
【Java基础系列】
1. 新增盒模型相关属性
1.1 box-sizing 怪异盒模型
- 使用 box-sizing 属性可以设置盒模型的两种类型
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_box-sizing</title> <style> .box1 { width: 200px; height: 200px; background-color: deepskyblue; padding: 5px; border: 5px solid black; margin-bottom: 20px; } .box2 { width: 200px; height: 200px; background-color: gray; padding: 5px; border: 5px solid black; box-sizing: border-box; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body> </html>
1.2 resize 调整盒子大小
- 使用 resize 属性可以控制是否允许用户调节元素尺寸。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_resize</title> <style> .box1 { width: 400px; height: 400px; background-color: orange; resize: both; overflow: hidden; } .box2 { width: 800px; height: 600px; background-color: skyblue; } </style> </head> <body> <div class="box1"> <div class="box2">123</div> </div> </body> </html>
1.3 box-shadow 盒子阴影
- 使用 box-shadow 属性为盒子添加阴影。
语法：
box-shadow: h-shadow v-shadow blur spread color inset;各个值的含义：
- 默认值： box-shadow:none 表示没有阴影
示例：
/* 写两个值，含义：水平位置、垂直位置 */ box-shadow: 10px 10px; /* 写三个值，含义：水平位置、垂直位置、颜色 */ box-shadow: 10px 10px red; /* 写三个值，含义：水平位置、垂直位置、模糊值 */ box-shadow: 10px 10px 10px; /* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */ box-shadow: 10px 10px 10px red; /* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */ box-shadow: 10px 10px 10px 10px blue; /* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */ box-shadow: 10px 10px 20px 3px blue inset;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_box-shadow</title> <style> .box1 { width: 400px; height: 400px; background-color: orange; margin: 0 auto; margin-top: 100px; font-size: 40px; /* 写两个值，含义：水平位置 垂直位置 */ /* box-shadow: 10px 10px; */ /* 写三个值，含义：水平位置 垂直位置 阴影的颜色 */ /* box-shadow: 10px 10px blue; */ /* 写三个值，含义：水平位置 垂直位置 模糊程度 */ /* box-shadow: 10px 10px 20px; */ /* 写四个值，含义：水平位置 垂直位置 模糊程度 阴影颜色 */ /* box-shadow: 10px 10px 20px blue; */ /* 写五个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 */ /* box-shadow: -10px -10px 20px 10px blue; */ /* 写六个值，含义：水平位置 垂直位置 模糊程度 外延值 阴影颜色 内阴影 */ /* box-shadow: 10px 10px 20px 10px blue inset; */ position: relative; top: 0; left: 0; transition: 0.4s linear all ; } .box1:hover { box-shadow: 0px 0px 20px 10px black; top: -1px; left: 0; } </style> </head> <body> <div class="box1">你好啊</div> </body> </html>
1.4 opacity 不透明度
- opacity 属性能为整个元素添加透明效果， 值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。
- opacity 与 rgba 的区别？
- opacity 是一个属性，设置的是整个元素（包括元素里的内容）的不透明度。
- rgba 是颜色的设置方式，用于设置颜色，它的透明度，仅仅是调整颜色的透明度。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_opacity</title> <style> .box1 { width: 200px; height: 200px; background-color: orange; font-size: 40px; opacity: 0.1; font-weight: bold; } .box2 { position: relative; } h1 { position: absolute; top: 100px; left: 0; background-color: black; color: white; width: 400px; line-height: 100px; text-align: center; font-size: 40px; opacity: 0.5; } </style> </head> <body> <div class="box1">你好啊</div> <div class="box2"> <img src="../images/你瞅啥.jpg" alt=""> <h1>你瞅啥</h1> </div> </body> </html>
2. CSS3 新增背景属性
2.1 background-origin
作用：设置背景图的原点。
语法
- padding-box ：从 padding 区域开始显示背景图像。—— 默认值
- border-box ：从 border 区域开始显示背景图像。
- content-box ：从 content 区域开始显示背景图像。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_background-origin</title> <style> .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); background-image: url('../images/bg01.jpg'); background-repeat: no-repeat; background-origin: border-box; } </style> </head> <body> <div class="box1">你好啊</div> </body> </html>
2.2 background-clip
作用：设置背景图的向外裁剪的区域。
语法
- border-box ：从 border 区域开始向外裁剪背景。 —— 默认值
- padding-box ：从 padding 区域开始向外裁剪背景。
- content-box ：从 content 区域开始向外裁剪背景。
- text ：背景图只呈现在文字上。
- 注意：若值为 text ，那么 backgroun-clip 要加上 -webkit- 前缀。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_background-clip</title> <style> .box1 { width: 400px; height: 400px; background-color: skyblue; margin: 0 auto; font-size: 120px; font-weight: bold; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); color: transparent; background-image: url('../images/bg02.jpg'); background-repeat: no-repeat; background-origin: border-box; -webkit-background-clip: text; } </style> </head> <body> <div class="box1">你好啊</div> </body> </html>
2.3 background-size
作用：设置背景图的尺寸。
语法：
- 用长度值指定背景图片大小，不允许负值。
background-size: 300px 200px;
- 用百分比指定背景图片大小，不允许负值。
background-size: 100% 100%;
- auto ：背景图片的真实大小。 —— 默认值
- contain ： 将背景图片等比缩放，使背景图片的宽或高，与容器的宽或高相等，再将完整背景图片包含在容器内，但要注意：可能会造成容器里部分区域没有背景图片。
background-size: contain;
- cover ：将背景图片等比缩放，直到完全覆盖容器，图片会尽可能全的显示在元素上，但要注意：背景图片有可能显示不完整。—— 相对比较好的选择
background-size: cover;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_background-size</title> <style> div { width: 400px; height: 400px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); background-image: url('../images/bg03.jpg'); background-repeat: no-repeat; /* background-size: 400px 400px; */ /* background-size: 100% 100%; */ /* background-size: contain; */ background-size: cover; } </style> </head> <body> <div></div> </body> </html>
2.4 backgorund 复合属性
语法：
background: color url repeat position / size origin clip注意：
- origin 和 clip 的值如果一样，如果只写一个值，则 origin 和 clip 都设置；如果设置了两个值，前面的是 origin ，后面的 clip 。
- size 的值必须写在 position 值的后面，并且用 / 分开。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_background复合属性</title> <style> .box1 { width: 400px; height: 400px; margin: 0 auto; font-size: 40px; padding: 50px; border: 50px dashed rgba(255, 0, 0, 0.7); /* background: 背景颜色 背景url 是否重复 位置 / 大小 原点 裁剪方式; */ background:skyblue url('../images/bg03.jpg') no-repeat 10px 10px / 500px 500px border-box content-box; } </style> </head> <body> <div class="box1">你好啊</div> </body> </html>
2.5 多背景图
- CSS3 允许元素设置多个背景图片
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_多背景图</title> <style> div { width: 400px; height: 400px; border: 1px solid black; background: url('../images/bg-lt.png') no-repeat left top, url('../images/bg-rt.png') no-repeat right top, url('../images/bg-lb.png') no-repeat left bottom, url('../images/bg-rb.png') no-repeat right bottom; } </style> </head> <body> <div></div> </body> </html>
结语
本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力
