马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-8-12 17:44 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
通过课程我们知道 outline 的位置：
还要知道 outline 和 border 的区别：
上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鱼C-outline</title>
<style type="text/css">
a {
border: 3px solid green;
border-radius: 3px;
display: inline-block;
margin: 10px;
padding: 5px;
}
a:focus {
outline: 5px dotted #e73;
outline-offset: 4px;
background: #ffa;
}
</style>
</head>
<body>
<a href="#">我是一条带有 outline 效果的 a 元素</a>
</body>
</html>
接下来就是 box-shadow 属性。
box-shadow 属性用于在元素的框架上添加阴影效果。
可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。
该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和颜色。
设置不同位置不同的阴影值就会有不同的效果。
来一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>box-shadow</title>
<style type="text/css">
div {
width: 120px;
height: 100px;
margin-top: 20px;
}
.d1 {
box-shadow: 10px 5px 5px green;
}
.d2 {
box-shadow: inset 5em 1em red;
}
</style>
</head>
<body>
<div class="d1">ilovefishc.com</div>
<div class="d2">ilovefishc.com</div>
</body>
</html>
几乎可以在任何元素上使用 box-shadow 来添加阴影效果。
如果元素同时设置了 border-radius 属性 ，那么阴影也会有圆角效果。
多个阴影在 z 轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-6-21 10:11:58
置顶卡
千斤顶
显身卡
发表于 2020-9-3 12:58:51
发表于 2021-8-25 20:47:07
