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

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

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

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



哈哈，废话不多说了，#敲黑板时刻！{:10_281:}



在线视频：传送门



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

通过课程我们知道 outline 的位置：



还要知道 outline 和 border 的区别：

**** Hidden Message *****
上代码：

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



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

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



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

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

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

111

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

123

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

回复快快快

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

{:10_277:}

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

{:5_95:}

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

{:7_146:}

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

outline-offset

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

11

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

不占位置

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

{:10_339:}
页: [1]
查看完整版本: 048 - 世界这么大还是遇见你