从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（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;

属性值	解释
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（就是自己设置盒子的宽度大小不会成大盒子）

实例：
代码：

<!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）

------笔杆没多重，不写拿不动。

从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）相关推荐

用php做盒子模型,什么是CSS盒子模型？一文带你了解CSS盒子模型
本篇文章给大家带来的内容是关于什么是CSS盒子模型?一文带你了解CSS盒子模型,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是CSS盒子模型网页设计中常听的属性名:内容(co ...
从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端：jQuery官网 --- 今天你学习了吗？（CSS：Day26）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:标签渐变和媒体查询 - 今天你学习了吗?(CSS:Day25) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录从零开始学前端:程序猿小白也可以完全掌 ...
从零开始学前端：表单制作 --- 今天你学习了吗？（CSS：Day05）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:表格制作 - 今天你学习了吗?(CSS:Day04) 文章目录从零开始学前端:程序猿小白也可以完全掌握! ...
从零开始学前端：链接跳转 --- 今天你学习了吗？（CSS：Day03）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:HTML的一些文本格式化标签.快捷键.和特殊符号 - 今天你学习了吗?(CSS:Day02) 文章目录从 ...
从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录从零开始学前端 ...
从零开始学前端：浮动 --- 今天你学习了吗？（CSS：Day15）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS盒子模型属性 - 今天你学习了吗?(CSS:Day14) 文章目录从零开始学前端:程序猿小白也可以 ...
从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:过渡和动画 - 今天你学习了吗?(CSS:Day20) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...

从零开始学前端：CSS盒子模型属性 --- 今天你学习了吗？（CSS：Day14）