< p >CSS 生成購物車圖標代碼< /p >< pre >.shopping-cart {
width: 75px;
height: 75px;
background: #FFF;
border-radius: 50%;
box-shadow: 0 0 0 2px #999;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.shopping-cart:before {
content: "";
width: 25px;
height: 25px;
border-radius: 50%;
background: #F00;
position: absolute;
right: -10px;
top: -10px;
}
.shopping-cart:after {
content: "";
width: 50px;
height: 5px;
background: #999;
position: absolute;
bottom: 0;
}
.shopping-cart:before,
.shopping-cart:after {
box-sizing: border-box;
}
.shopping-cart span {
font-family: Arial, sans-serif;
font-size: 32px;
color: #999;
position: absolute;
}
.shopping-cart span:before {
content: "\f07a";
font-family: FontAwesome;
font-size: 72px;
color: #999;
}< /pre >< p >要生成一個簡單的購物車圖標，我們需要創建一個圓形 div 在其中心，使用偽元素創建“上部墊片”，在下方添加一個“底部墊片”和一個 Font Awesome 的購物車圖標。< /p >
上一篇mysql并列查詢
下一篇css生成快捷鍵怎么敲