从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
复习：从零开始学前端：伪元素和盒子模型 — 今天你学习了吗？（Day13）
文章目录
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）前言第十四节课：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;
*注意：
默认的是外阴影（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；
4.CSS3新盒子
CSS3新盒子模型，CSS3中可以通过box-sizing来指定盒子模型，有两个 属性值，content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
盒子计算方式氛围两种情况：
a. box-sizing:content-box（盒子大小）：width+padding+border（以前默认盒子大小组成）
b. box-sizing:border-box 盒子大小为width（就是自己设置盒子的宽度大小不会成大盒子）
实例：
代码：
<!DOCTYPE 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>盒子模型宽和高</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:
<!DOCTYPE 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://">手机<!-- <img src="./img/下一页.png" alt=""> --></a></li><li><a href="http://">电视<!-- <img src="./img/下一页.png" alt=""> --></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主页的菜单
代码：
<!DOCTYPE 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>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>
效果图：
预习：从零开始学前端：浮动 — 今天你学习了吗？（CSS：Day15）
------笔杆没多重，不写拿不动。
