从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（Day14）
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day14）
复习：从零开始学前端：伪元素和盒子模型 — 今天你学习了吗？（Day13）
文章目录
- 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（Day14）
-
- 前言
- 第十四节课：CSS盒子阴影
-
- 一、盒子模型
-
- 1.圆角边框
- 2. 盒子阴影
- 3.文字阴影
- 4.CSS3新盒子
- 二、练习
前言
一懒终身懒…开工第一天，讲课没听懂，正好之后赶上情人节元宵节，朋友过生日，然后又连着两节课没上，我现在感觉已经落下好多…欲哭无泪。
第十四节课：CSS盒子阴影
一、盒子模型
1.圆角边框
在css3中新增了圆角边框样式，这样我们的盒子就可以边圆角了。
border-radius属性用于设置元素的外边框圆角。
border-radius:length
分开写：
{border-top-left-radius、border-top-left-radius、border-bottom-right-radius、border-bottom-left-radius、}2. 盒子阴影
CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影，文字阴影的属性也是。
box-shadow:h-shadow v-shadow blur spread color inset;
| 属性值 | 解释 |
|---|---|
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的尺寸。 |
| inset | 可选。将外部阴影（outset）改为内部阴影。 |
*注意：
默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效。
盒子阴影不占用空间，不会影响其他盒子排列。
样式：
div{box-shadow：0px 0px 20px blue inset;0px 0px 40px pink inset;0px 0px 40px gold;}3.文字阴影
文字阴影和盒子阴影的属性一样。
text-shadow：h-shadow v-shadow blur color；
| 属性值 | 解释 |
|---|---|
| h-shadow | 必须，水平阴影的位置。 |
| v-shadow | 必须，垂直阴影位置。 |
| blur | 可选择写，默认不模糊 |
| color | 阴影颜色（选择填写） |
4.CSS3新盒子
CSS3新盒子模型，CSS3中可以通过box-sizing来指定盒子模型，有两个 属性值，content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
盒子计算方式氛围两种情况：
a. box-sizing:content-box（盒子大小）：width+padding+border（以前默认盒子大小组成）
b. box-sizing:border-box 盒子大小为width（就是自己设置盒子的宽度大小不会成大盒子）
实例：
代码：
<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>盒子模型宽和高</title> <style> .box1{ height: 200px; width: 200px; background-color: teal; border: 25px solid pink; box-sizing: border-box; } .box2{ height: 200px; width: 200px; background-color: teal; border: 25px solid pink; box-sizing: content-box; } </style></head><body> <div class="box1"></div> <br> <div class="box2"></div></body></html>二、练习
- 小米空调
代码：
HTML:
<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>14作业</title> <link rel="stylesheet" href="./css/米家.css"></head><body> <div class="contain"> <div class="mulu"> <ul> <li> <a href="http://"> 手机 <!-- 
--> </a> </li> <li> <a href="http://"> 电视 <!-- --> </a> </li> <li> <a href="http://"> <span>笔记本</span> <span>平板</span> </a> </li> <li> <a href="http://"> <span>家电</span> </a> </li> <li> <a href="http://"> <span>出行穿戴</span> </a> </li> <li> <a href="http://"> <span>智能路由器</span> </a> </li> <li> <a href="http://"> <span>电源</span> <span>配件</span> </a> </li> <li> <a href="http://"> <span>健康</span> <span>儿童</span> </a> </li> <li> <a href="http://"> <span>耳机</span> <span>音箱</span> </a> </li> <li> <a href="http://"> <span>生活</span> <span>箱包</span> </a> </li> </ul> </div> </div></body></html>CSS文件：
.contain{ height: 600px; width: 1500px; background-image: url(./../img/bgimg.webp); background-repeat: no-repeat; background-size: 1500px 600px; margin: 50px auto;}.mulu{ height: 600px; width: 350px; background-color: rgba(123,116,114, .5);}ul{ list-style-type: none; height: 600px; margin: 0; padding: 0;}li{ margin: 0; height: 60px; background-image: url(./../img/下一页.png); background-size: 15px; background-repeat: no-repeat; background-position: 280px 50%;}a{ margin: 0 0 0 50px; display: block; color: rgb(255, 255, 255); line-height: 60px; font-size: 17px; text-decoration: none;}li:hover{ color: rgb(230, 184, 141); background-color: rgba(117, 107, 91, 0.3);}效果：
- W3school主页的菜单
代码：
<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>W3C</title> <style> .box{ height: 60px; width: 900px; background-color: rgb(232,231,227); margin: 100px auto; } .box a{ /* 内联标签 */ display: inline-block; height: 60px; line-height: 60px; /* padding撑开，可以根据字体的长度而规定长度---这里想不到 */ padding: 0 20.5px; text-decoration: none; color: black; } .box a:hover{ background-color: rgb(63,63,63); color: aliceblue; } </style></head><body> <div class="box"> <a href="">HTML/CSS</a> <a href="">Browser Side</a> <a href="">Server Side</a> <a href="">Programming</a> <a href="">XML</a> <a href="">Web Building</a> <a href="">Reference</a> </div></body></html>效果图：
预习：从零开始学前端：浮动 — 今天你学习了吗？（Day15）
------笔杆没多重，不写拿不动。
