048 - 世界这么大还是遇见你

不二如是 · 发表于 2020-6-21 10:11:58

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2020-8-12 17:44 编辑

上一集：047 - 知识改变命运

哈哈，废话不多说了，#敲黑板时刻！

在线视频：传送门

课程思维导图

猛戳

登录/注册后可看大图

超清

轮廓（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 规则相同(第一个阴影在最上面)。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：049 - 看山不是山（上）

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅淘专辑（传送门）（不喜欢更要订阅

）

昵称_cwb · 发表于 2020-9-3 12:58:51

pym131420 · 发表于 2020-11-10 16:45:00

natapon · 发表于 2021-1-20 23:43:53

回复快快快

笙歌醉梦 · 发表于 2021-1-21 16:06:55

13998929493 · 发表于 2021-4-5 15:58:23

冲

O2H2O · 发表于 2021-7-12 11:07:10

轮廓只能是矩形

O2H2O · 发表于 2021-7-12 11:12:42

速查表中，“注意：轮廓线不会占据空间，也不一定是矩形。”与视频内容有差异哦，视频说outline只能是矩形。

心驰神往 · 发表于 2021-8-4 08:33:19

区别

刘彩玲 · 发表于 2021-8-16 14:32:44

想看

hornwong · 发表于 2021-8-16 14:42:45

hanyuncanying · 发表于 2021-8-25 20:47:07

douTREE · 发表于 2021-9-12 23:30:20

outline-offset

xuexiaoyan · 发表于 2022-8-8 18:03:57

c2514710281 · 发表于 2022-10-31 11:38:40

不占位置

小坛砸 · 发表于 2024-4-17 16:48:56

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 048 - 世界这么大还是遇见你

马上注册，结交更多好友，享用更多功能^_^

本帖被以下淘专辑推荐: