用CSS3实现阴影效果

叁歲伎倆 2022-04-04 12:09 435阅读 0赞

任务描述

本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。

效果如下：

![198693][]

相关知识

为了完成本关任务，你需要掌握：1.外阴影，2.多行省略，3. 设置圆角。

外阴影

下面是基本的html结构：

1.  `<div class="shadow"></div>`

效果如下：

![197157][]

现在要左边，右边，下边都添加阴影。  
效果如下：

![197159][]

该如何实现呢？

咱们先实现右边和下边的阴影。

如上面所说，添加如下代码：

1.  `.shadow{`
2.  `box-shadow: 10px 10px 10px #000;`
3.  `}`

效果如下：

![197161][]

可以看出，这两边已经添加上了，还缺左边，修改上面代码：

1.  `.shadow{`
2.  `box-shadow: 10px 10px 10px #000, -10px 10px 10px #000;`
3.  `}`

效果如下：

![197159][]

这里已经实现了。

就 `box-shadow: 10px 10px 10px #000;`介绍一下`box-shadow`的属性值：

*  第一个参数表示水平阴影的位置，正数表示右边，负数表示左边；
 *  第二个参数表示垂直阴影的位置，正数表示下边，负数表示上边；
 *  第三个参数表示模糊距离，就是模糊的程度；
 *  第四个参数表示阴影的颜色；

三边阴影实现的想法： 右边和下边阴影很容易实现，就是左边阴影该怎么实现呢？ 再添加一组阴影，为左边和下边就可以了。

多行省略

先讲单行省略

在上面的结构中添加一行文字，结构如下：

1.  `<div class="shadow">`
2.  `<p>起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p>`
3.  `</div>`

效果如下：  
![197165][]

如何让它单行省略呢？ 添加如下代码

1.  `.shadow p{`
2.  `overflow: hidden; // 自动隐藏文字`
3.  `text-overflow:ellipsis; //文字隐藏后添加省略号`
4.  `white-space: nowrap; //强制不换行`
5.  `}`

效果如下：

![197166][]

如何实现多行出现省略号呢？这里以3行为例，想法是设置好3行的高度，每一行的高度也就知道了， 在高度范围内隐藏并出现省略号。  
添加如下代码：

1.  `.shadow p{`
2.  `height: 72px;`
3.  `line-height: 24px;`
4.  `overflow: hidden;`
5.  `text-overflow:ellipsis;`
6.  `display: -webkit-box;`
7.  `-webkit-box-orient: vertical;`
8.  `-webkit-line-clamp: 3;`
9.  `}`

效果如下：

![197168][]

比较难懂的是下面3个属性：

*  display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 ；
 *  \-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式；
 *  \-webkit-line-clamp: 3; 限制在一个块元素显示的文本的行数。

这三个属性是结合在一起使用的。

设置圆角

对于下面的效果，只实现圆角，`hover`效果相信大家是可以做出来的。

![197171][]

这里用到了 border-radius 这个属性。

基本结构如下：

1.  `<div class="radius">`
2.  `全部资讯`
3.  `</div>`

效果如下：

![197176][]

要实现圆角效果，添加如下代码：

1.  `.radius{`
2.  `border-radius: 20px 20px 20px 20px;`
3.  `}`

效果如下：

![197177][]

这里介绍一下`border-radius`的属性值：

*  四个值分别代表四个圆角，顺序为顺时针方向，第一个为左上角，依次为右上角，右下角，左下角。
 *  如果四个角都一样，可以用一个角表示，所以上面可以简写为：  
    `border-radius: 20px;`

编程要求

在右侧编辑器中，补全`Begin`至`End`中间的部分，按照提示完成代码：

*  给`.diary-item`设置圆角为`20px`；
 *  给`.diary-item`设置左边,右边,下边的外部阴影。水平阴影和垂直阴影的值为`10px`，模糊距离为`20px`，颜色为`#ccc`；
 *  给`.diary-describe`设置自动隐藏文字；
 *  给`.diary-describe`设置文字隐藏后添加省略号

**注意**：这里圆角用省略模式，用一个数表示就可以。

效果如下：

![198693][]

[198693]: /images/20220404/3e114bae45b847b2a6396c921370bab2.png
[197157]: https://educoder.trustie.net/attachments/download/197157
[197159]: https://educoder.trustie.net/attachments/download/197159
[197161]: https://educoder.trustie.net/attachments/download/197161
[197165]: https://educoder.trustie.net/attachments/download/197165
[197166]: https://educoder.trustie.net/attachments/download/197166
[197168]: https://educoder.trustie.net/attachments/download/197168
[197171]: https://educoder.trustie.net/attachments/download/197171
[197176]: https://educoder.trustie.net/attachments/download/197176
[197177]: https://educoder.trustie.net/attachments/download/197177