玩玩CSS,写一个图标堆叠效果
遇到有人问如下效果怎么写，一时兴起，自己写一个玩玩。
看到这个样子，首先应该考虑一下 DOM 结构，以我的观点，把DOM结构设计为如下形式：
<div> <img src="./img1.png" /> <img src="./img2.png" /> <img src="./img3.png" /> div>
即，一个 DIV 中包含图片，对于左侧的文字，这里考虑使用 ::before CSS实现。
首先，我们建立整个的 HTML 如下，
DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">style>
head>
<body>
<div>
<img src="./img1.png" />
<img src="./img2.png" />
<img src="./img3.png" />
div>
body>
html>
我们将 like 列表的 CSS 样式命名为 like-list, 在 style 标签中添加如下代码：
.like-list { height: 40px; width: 300px; padding: 5px; border: none; float: right; background-color: lightseagreen; margin-right: 0; border-radius: 30px 0 0 30px; }
然后，将样式附加到div，整体代码修改如下：
DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.like-list {
height: 40px;
width: 300px;
padding: 5px;
border: none;
float: right;
background-color: lightseagreen;
margin-right: 0;
border-radius: 30px 0 0 30px;
}
style>
head>
<body>
<div class="like-list">
<img src="./img1.png" />
<img src="./img2.png" />
<img src="./img3.png" />
div>
body>
html>
显示效果如下：
嗯，外层效果出来了，我们再把下面几张图片下载下来，放在和HTML文件相同位置：
刷新浏览器，我们看到如下效果：
图片变得好大，调整一下，添加如下样式：
.like-list> img { margin: 0; height: 30px; width: 30px; border-radius: 30px; border: 3px solid white; margin-left: -15px; }
再看：
嗯，有点样子了，接下来，添加文本，我们就不多创建DOM节点了，再添加如下CSS:
.like-list::before { height: 30px; width: 30px; content: "Like"; color: white; position: relative; top: -15px; margin-right: 15px; }
再看效果：
好了，效果出来了，全部代码如下：
DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.like-list {
height: 35px;
width: 300px;
border-radius: 30px 0 0 30px;
border: none;
float: right;
background-color: lightseagreen;
margin-right: 0;
padding: 5px;
}
.like-list > img {
margin: 0;
height: 30px;
width: 30px;
border-radius: 30px;
border: 3px solid white;
margin-left: -15px;
}
.like-list::before {
height: 30px;
width: 30px;
content: "Like";
color: white;
position: relative;
top: -15px;
margin-right: 15px;
}
style>
head>
<body>
<div class="like-list">
<img src="./img1.png" />
<img src="./img2.png" />
<img src="./img3.png" />
div>
body>
html>
总结一下，这里主要使用了 border-radius CSS设置圆角，用border设置边框，然后使用 margin-left: -15px; 进行了图片堆叠。
最近准备发奋了，要多写些东西分享了，欢迎关注下面公众号，更多文章期待与你相遇：