任务描述
本关任务：实现下面效果，包括外阴影，多行省略，圆角的设置。
效果如下：
相关知识
为了完成本关任务，你需要掌握：
1.外阴影，
2.多行省略，
3. 设置圆角。
外阴影
下面是基本的html结构：
<div class="shadow"></div>
效果如下：
现在要左边，右边，下边都添加阴影。
效果如下：
该如何实现呢？
咱们先实现右边和下边的阴影。
如上面所说，添加如下代码：
.shadow{
box-shadow: 10px 10px 10px #000;
}
效果如下：
可以看出，这两边已经添加上了，还缺左边，修改上面代码：
.shadow{
box-shadow: 10px 10px 10px #000, -10px 10px 10px #000;
}
效果如下：
这里已经实现了。
就 box-shadow: 10px 10px 10px #000;介绍一下box-shadow的属性值：
- 第一个参数表示水平阴影的位置，正数表示右边，负数表示左边；
- 第二个参数表示垂直阴影的位置，正数表示下边，负数表示上边；
- 第三个参数表示模糊距离，就是模糊的程度；
- 第四个参数表示阴影的颜色。
三边阴影实现的想法： 右边和下边阴影很容易实现，就是左边阴影该怎么实现呢？ 再添加一组阴影，为左边和下边就可以了。
多行省略
先讲单行省略。
在上面的结构中添加一行文字，结构如下：
<div class="shadow">
<p>起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站</p>
</div>
效果如下：
如何让它单行省略呢？ 添加如下代码：
.shadow p{
overflow: hidden; // 自动隐藏文字
text-overflow:ellipsis; //文字隐藏后添加省略号
white-space: nowrap; //强制不换行
}
效果如下：
如何实现多行出现省略号呢？这里以3行为例，想法是设置好3行的高度，每一行的高度也就知道了， 在高度范围内隐藏并出现省略号。
添加如下代码：
.shadow p{
height: 72px;
line-height: 24px;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
效果如下：
比较难懂的是下面3个属性：
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示 ；
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式；
-webkit-line-clamp: 3; 限制在一个块元素显示的文本的行数。
这三个属性是结合在一起使用的。
设置圆角
对于下面的效果，只实现圆角，hover效果相信大家是可以做出来的。
这里用到了 border-radius 这个属性。
基本结构如下：
<div class="radius">
全部资讯
</div>
效果如下：
要实现圆角效果，添加如下代码：
.radius{
border-radius: 20px 20px 20px 20px;
}
效果如下：
这里介绍一下 border-radius 的属性值：
- 四个值分别代表四个圆角，顺序为顺时针方向，第一个为左上角，依次为右上角，右下角，左下角；
- 如果四个角都一样，可以用一个角表示，所以上面可以简写为：
border-radius: 20px;。
代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>少儿教育</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
color: #888888;
text-decoration: none;
font-size: 16px;
}
body {
background: #f7f7f7;
position: relative;
}
.diary-block {
width: 90%;
height: 450px;
padding: 0 40px;
margin: 40px auto;
}
.diary-item {
width: 26%;
float: left;
overflow: hidden;
/*---------- Begin ----------*/
/*设置圆角为20px*/
border-radius:20px 20px 20px 20px;
/*设置左边,右边,下边的外部阴影,
水平阴影和垂直阴影的值为10px,模糊距离为20px,颜色为#ccc */
box-shadow:10px 10px 20px #ccc,-10px 10px 20px #ccc;
}
/*---------- End ----------*/
.diary-item:not(:last-child) {
margin-right: 7%;
}
.diary-item .diary-img {
overflow: hidden;
}
.diary-item .diary-img img {
width: 100%;
height: 232px;
transition: all .3s ease-in;
}
.diary-item .diary-img img:hover {
transform-origin: center;
transform: scale(1.1);
}
.diary-item .diary-details {
height: 180px;
padding: 10px 30px;
color: #888;
}
.diary-item .diary-details p {
line-height: 26px;
}
.diary-item .diary-details .diary-describe {
height: 72px;
/*-------- Begin --------*/
/*自动隐藏文字*/
overflow:hidden;
/*文字隐藏后添加省略号*/
text-overflow:ellipsis;
/*-------- End ----------*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin-top: 10px;
line-height: 24px;
}
</style>
</head>
<body>
<div class="diary-block">
<div class="diary-item clearfix">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198656" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198657" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
<div class="diary-item">
<div class="diary-img">
<img src="https://www.educoder.net/attachments/download/198658" alt="" />
</div>
<div class="diary-details">
<p>如何选择培训机构 ？</p>
<p>2017 06-15</p>
<p class="diary-describe">
起飞页推崇用户自己创建网站并享受建站所带来的乐趣，因此我们为您准备了一套安全、稳创建网站并享受建站创建网站并享受建站
</p>
</div>
</div>
</div>
</body>
</html>
1910
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
