css利用伪元素实现发票样式的边框

边框"/>

css利用伪元素实现发票样式的边框

效果：

代码如下：

.invoice-content {position: relative;width: 622px;height: 148px;background-color: $itemSelectedBgColor;border: 2px dotted $mainGreenColor;li {height: 74px;line-height: 74px;font-size: 28px;color: $wrapperTextColor;.label {float: left;margin-left: 24px;}.content {float: right;max-width: 340px;margin-right: 24px;font-weight: bold;color: $TextColor;}i {color: $deleteColor;}}}.invoice-content:before {content: '';position: absolute;top: 58px;left: -16px;width: 32px;height: 32px;background-color: #fff;border-right: 2px dotted $mainGreenColor;border-radius: 0 50px 50px 0; // 将左上和左下角的radius设置为0以改善效果}.invoice-content:after {content: '';position: absolute;top: 58px;right: -16px;width: 32px;height: 32px;background-color: #fff;border-left: 2px dotted $mainGreenColor;border-radius: 50px 0 0 50px; // 将右上和右下角的radius设置为0以改善效果}

 实现： 利用伪类先在元素的左右两侧画一个带边框的圆，然后将左侧圆的左半部分和右侧圆的有半部分的border-radius设置为0以保证效果

ps:上述css代码是从本人代码直接copy过来，颜色及class命名问题请自动忽略