CSS实现一些小功能

1.信封边框的实现

1.1 使用背景渐变

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.uu {width: 200px;height: 70px;padding:1em;border: 1em solid transparent;background: linear-gradient(white,white)         padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em; }</style></head><body><div class="uu"></div></body>
</html>

1.2 使用边框图片

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">.uu {width: 200px;height: 70px;padding: 1em;border: 1em solid transparent;background:linear-gradient(white,white)          padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;}</style></head><body><div class="uu"></div></body>
</html>

2.内凹圆角(优惠券)

2.1 使用伪类

<div class="main"></div>
<style>
.main {position: relative;width: 200px;height: 40px;margin: 0 5px;background: -webkit-linear-gradient(left, #F6327C, #DF3DF0);background: linear-gradient(to right, #F6327C, #DF3DF0);
}
.main::before {position: absolute;content: "";display: block;position: absolute;top: 0;left: -5px;width: 5px;height: 40px;border-radius: 2px 0 0 2px;background:-webkit-radial-gradient(10px at left,transparent 50%,#F6327C 50%);background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);
}
.main::after {position: absolute;content: "";display: block;position: absolute;top: 0;right: -5px;width: 5px;height: 40px;border-radius: 0 2px 2px 0;background: -webkit-radial-gradient(10px at right,transparent 50%,#F6327C 50%);background: radial-gradient(10px at right,transparent 50%,#F6327C 50%);
}
</style>

3.邮件虚线

<style>
.uni-grid-item-index {position: relative;overflow: hidden;border-top: 3rpx solid transparent;background: linear-gradient(white, white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;margin-bottom: 10rpx;flex: 0 0 32%;
}
</style>

4.右上角三角形

<style>
.uni-detail-right-content {width: 70%;background: #fff;border-radius: 5rpx;border: 1px solid #c4c6cb;margin: 10rpx 0 0 10rpx;font-size: 12rpx;position: relative;overflow: hidden;
}
.right-content-icon {background: red;color: white;width: 4.5rem;height: 4rem;display: flex;align-items: flex-end;justify-content: center;line-height: 1.1;text-align: center;position: absolute;top: -30rpx;right: -35rpx;transform: rotate(45deg);
}</style>