任务描述
本关任务:实现下面效果,包括外阴影,多行省略,圆角的设置。
效果如下:
为了完成本关任务,你需要掌握: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;
在右侧编辑器中,补全Begin
至End
中间的部分,按照提示完成代码:
-
给
.diary-item
设置圆角为20px
; -
给
.diary-item
设置左边,右边,下边的外部阴影。水平阴影和垂直阴影的值为10px
,模糊距离为20px
,颜色为#ccc
; -
给
.diary-describe
设置自动隐藏文字; -
给
.diary-describe
设置文字隐藏后添加省略号
注意:这里圆角用省略模式,用一个数表示就可以。
效果如下: