开发者学堂课程【移动 Web 前端开发：产品-优惠券-优惠券线】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8471
产品-优惠券-优惠券线
优惠券线介绍
制作这一条线
Ø 拟化一下，画出两个圆，将圆的颜色改为背景色：
Ø 修改样式：
.product_box ,box_right::before{}
.product_box ,box_right::after{
content:””;
width:12px;
height:12px:
position:absolute;
left:-6px;
background:red;
border-radius:6px;
}
.product_box ,box_right::before{
left:-6px;
}
.product_box ,box_right::after{
left:-6px;
}
Ø 进入浏览器，刷新后可以看到效果：
Ø 在 .product_box ,box_right 添加：
border-left：1px dashed #ddd;
Ø 在 .product_box ,box_right::after 中改掉背景色：
background:#f5f5f5;
Ø 给圆加阴影：
.product_box ,box_right::before{
left:-6px;
box-shadow:inset 0 -2px 3px #d8d8d8;
}
.product_box ,box_right::after{
left:-6px;
box-shadow:inset 0 2px 3px #d8d8d8;
}
