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>
