本文展示了各种使用CSS实现的图形设计，包括层叠框、渐变按钮、叶形、扇形、半圆、重影效果等，并提供了详细的HTML和CSS代码示例。这些技巧涵盖了背景渐变、边框样式、伪元素和定位等CSS属性的综合应用，适合前端开发者学习和参考。
html:
<view class="tag-gray"></view>css1:
.tag-gray {
background: linear - gradient(
135deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
rgba(255, 167, 38, 1) 25%,
rgba(255, 167, 38, 1) 100%
);
width: 618rpx;
height: 80rpx;
}效果图1：
css2:
.tag-gray {
background: linear - gradient(
45deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
rgba(255, 167, 38, 1) 25%,
rgba(255, 167, 38, 1) 100%
);
width: 618rpx;
height: 80rpx;
}效果图2：
css3：
.tag-gray {
background: linear - gradient(
45deg,
rgba(0, 0, 0, 1) 0%,
rgba(0, 0, 0, 1) 25%,
rgba(255, 167, 38, 1) 25%,
rgba(255, 167, 38, 1) 50%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 75%,
rgba(255, 167, 38, 1) 75%,
rgba(255, 167, 38, 1) 100%
);
width: 618rpx;
height: 80rpx;
}效果图3：
html：
<div class="box-header"></div>css：
.box-header {
width: 90%;
height: 20px;
background: linear-gradient(180deg, rgba(228, 109, 92, 0.15) 0%, #E46D5C 100%);
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 2px solid;
transform: perspective(0.4em) rotateX(3deg);
border-image: linear-gradient(to top, rgb(0 0 0 / 0%), rgba(0, 0, 0, 0)) 1 1;
margin:100px auto;
}效果图：
html:
<view class="sports-goals-item flex-center-start targetActive targetRecommendation">
<image class="sports-goals-item-img" src="../../../../../static/image/sports_icon1.png" alt="" />
<view class="sports-goals-item-text">基础力量</view>
</view>css:
.sports-goals-item {
padding: 0 0 0 66rpx;
width: 244rpx;
height: 96rpx;
background: #f8faf9;
border-radius: 16rpx;
position: relative;
overflow: hidden;
}
.targetRecommendation:before {
content: "推荐";
position: absolute;
top: -8rpx;
right: -26rpx;
z-index: 1;
padding: 14rpx 22rpx 2rpx;
background-color: #16B871;
transform: rotate(45deg);
font-size: 20rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #ffffff;
}
.sports-goals-item-img {
width: 36rpx;
height: 36rpx;
}
.sports-goals-item-text {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
text-align: left;
color: #4b4b4b;
line-height: 40rpx;
margin-left: 28rpx;
}
.targetActive {
background: #eefcf6;
border: 2rpx solid #16b871;
border-radius: 16rpx;
box-shadow: 0rpx 0rpx 10rpx 0rpx #f4f4f4;
}
效果图：
css:
.sports-goals-item {
padding: 0 0 0 66rpx;
width: 244rpx;
height: 96rpx;
background: #f8faf9;
border-radius: 16rpx;
position: relative;
overflow: hidden;
}
.targetRecommendation:before {
content: "推荐";
position: absolute;
top: 9rpx;
right: -30rpx;
z-index: 1;
padding: 2rpx 36rpx 2rpx;
background-color: #16B871;
transform: rotate(45deg);
font-size: 20rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #ffffff;
}
.sports-goals-item-img {
width: 36rpx;
height: 36rpx;
}
.sports-goals-item-text {
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
text-align: left;
color: #4b4b4b;
line-height: 40rpx;
margin-left: 28rpx;
}
.targetActive {
background: #eefcf6;
border: 2rpx solid #16b871;
border-radius: 16rpx;
box-shadow: 0rpx 0rpx 10rpx 0rpx #f4f4f4;
}效果图：
效果图：
代码：
<template>
<div>
<!-- 字段集 -->
<fieldset>
<legend>
<img
alt="Vue logo"
src="../assets/logo.png"
width="20"
height="20"
/>字段集（HTML5语法）
</legend>
<div class="sex-box">
<div>不允许写结束标记的元素：br,col,embed,hr,img,input,link,meta</div>
<div>
可以省略结束标记的元素：li,dt,dd,p,option.colgroup,thead,tbody,tfoot,tr,td,th
</div>
<div>可以省略全部标记的元素：html,head,body,colgroup,tbody</div>
</div>
</fieldset>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
fieldset {
width: fit-content; /* 宽度根据padding自适应*/
border: 1px solid blue;
margin: 0 auto;
}
legend {
color: blue;
display: flex;
align-items: center;
}
.sex-box {
padding: 32px;
}
.sex-box div {
font-size: 16px;
color: blue;
line-height: 24px;
text-align: left;
}
</style>
注意：1rem=100px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮</title>
<style>
body,
html {
height: 100%;
width: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.btn {
width: 150px;
height: 50px;
line-height: 50px;
border-radius: 10px;
overflow: hidden;
text-align: center;
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
color: #fff;
position: relative;
}
.btn::before {
content: '';
position: absolute;
width: 50px;
height: 20px;
top: -1px;
right: -1px;
background-image: linear-gradient(to right, #d44c22 0%, #eeb4a2 50%);
transform: skew(20deg);/* 控制邪角 */
border-radius: 0 10px;
}
.button {
position: relative;
color: #ffffff;
width: 80px;
height: 25px;
top: -68px;
right: -88px;
}
</style>
</head>
<body>
<div class="btn">
按钮
<div class="button">tips</div>
</div>
</body>
</html>效果图：
文字上半部分带背景色
html：
<div class="sutp-left-subitem-title">
<div class="sutp-left-subitem-title-cont">
<div class="sutp-left-subitem-title-bg"></div>
<div class="sutp-left-subitem-title-text">
游戏、电竞板块
</div>
</div>
</div>css：
.sutp-left-subitem-title {
font-size: 0.18rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #000000;
display: flex;//一定要用这个背景才能自适应
}
.sutp-left-subitem-title-bg {
height: 0.2rem;
background: linear-gradient(
270deg,
#3e9dfc 0%,
#6bbfff 39%,
#b7eeff 100%
);
}
.sutp-left-subitem-title-text {
padding: 0 0.08rem;
position: relative;
top: -0.09rem;
}效果图：
层叠框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.com-border-box1 {
width: fit-content;
padding: .42rem .26rem .26rem .26rem;
background: #97CDE4;
border-radius: .12rem;
box-shadow: inset 0 .2rem 0 0 #1B208E;
border: .03rem solid #121E88;
}
.com-border-box2 {
width: 4.55rem;
height: 4rem;
background: #3C72CA;
box-shadow: inset 0 -.2rem 0 0 #1B208E;
border-radius: .12rem;
border: .04rem solid #1B208E;
}
</style>
</head>
<body>
<div class="com-border-box1">
<div class="com-border-box2"></div>
</div>
</body>
</html>效果图：
渐变按钮：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn{
width: 100%;
height: 0.98rem;
line-height: 0.98rem;
text-align: center;
background: linear-gradient(90deg, #233ECC 0%, #35F9FF 100%);
box-shadow: 0.02rem 0.05rem 0 0 rgba(0,0,0,0.5), inset 0.07rem 0.07rem 0 0 rgba(255,255,255,0.5), inset -0.03rem -0.04rem 0.13rem 0 #FFFFFF;
border-radius: 0.16rem;
font-size: 0.32rem;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
letter-spacing: 1px;
text-shadow: 0 0.02rem 0 #003A9B;
-webkit-text-stroke: 0.02rem #224785;
text-stroke: 0.02rem #224785;
}
</style>
</head>
<body>
<div class="btn">提交</div>
</body>
</html>效果图：
叶形：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.semi-circle{
width: 200px;
height: 100px;/*高度为宽度的一半*/
line-height: 100px;/*设置的字与高度相等，文字则上下居中*/
margin:0 auto;
border-radius: 0 100px 0 100px;/*100px为高度*/
background: rgba(16, 40, 180, 1);/*背景色*/
font-size: 16px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="semi-circle">
测试测试测试测试测试
</div>
</body>
</html>效果图：
扇形：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.semi-circle{
width: 200px;
height: 200px;/*高度为宽度的一半*/
line-height: 100px;/*设置的字与高度相等，文字则上下居中*/
margin:0 auto;
border-radius: 0 0 0 200px;/*200px设置在不同的位置则代表不同方向的扇形*/
background: rgba(16, 40, 180, 1);/*背景色*/
font-size: 16px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="semi-circle">
测试测试
</div>
</body>
</html>效果图：
html：
<div class="mod-wrap-cont">
可不写宽高，自动撑开
</div>css:
.mod-wrap-cont{
width: 200px;
height: 240px;
margin:0 auto;
border-radius: 12px;
background: rgba(16, 40, 180, 1);/*背景色*/
/**box-shadow：h-shadow v-shadow blur color inset（不写为外阴影）的注解
*0px为水平左右阴影的位置（h-shadow），
*1px为垂直上下阴影的位置（v-shadow）
*20px为阴影模糊程度（blur）
*rgb(68 235 254 / 50%)为阴影的颜色（color）【68 235 254为色值，50%为颜色的透明度】
*inset为内阴影，默认无值便为外阴影
**/
/* box-shadow: 1px 1px 20px rgb(68 235 254 / 30%) inset,2px 2px 20px rgb(68 235 254 / 30%) inset,3px 3px 20px rgb(68 235 254 / 30%) inset, 4px 4px 20px rgb(68 235 254 / 30%) inset;此写法为四边设置不同的值（左上，右上，右下，左下） */
box-shadow:0px 1px 20px rgb(68 235 254 / 50%) inset;/*四边为一样的值只写一次，*/
font-size: 16px;
color: #fff;
padding:50px 16px;
text-align: center;
}效果图：
html:
<div class="com-code">
<div class="container-header"></div>
<div class="com-code-cont">
<div class="flex-column-center-center">
<img class="code-img" src="" alt="" />
</div>
</div>
<div class="container-footer"></div>
</div>css:
/* 100px=1rem,可自行转换 */
.flex-column-center-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.com-code {
box-sizing: border-box;
/* 一定要在父级设置定位，边角使用position: absolute; */
position: relative;
}
.com-code-cont {
padding: 0.29rem 0.22rem;
}
.code-img {
width: 2.57rem;
height: 2.52rem;
border-radius: 0.08rem;
border: 0.04rem solid #75ff1e;
}
/* 上左（长短通过宽高控制） */
.corner-header::before {
content: "";
position: absolute;
width: 0.68rem;
height: 0.45rem;
top: 0;
left: 0;
border-top: 1px solid rgba(117, 255, 30, 1);
border-left: 1px solid rgba(117, 255, 30, 1);
}
/* 上右（长短通过宽高控制） */
.corner-header::after {
content: "";
position: absolute;
width: 0.68rem;
height: 0.45rem;
top: 0;
right: 0;
border-top: 1px solid rgba(117, 255, 30, 1);
border-right: 1px solid rgba(117, 255, 30, 1);
}
/* 下左（长短通过宽高控制） */
.corner-footer::before {
content: "";
position: absolute;
width: 0.68rem;
height: 0.45rem;
bottom: 0;
left: 0;
border-bottom: 1px solid rgba(117, 255, 30, 1);
border-left: 1px solid rgba(117, 255, 30, 1);
}
/* 下右（长短通过宽高控制） */
.corner-footer::after {
content: "";
position: absolute;
width: 0.68rem;
height: 0.45rem;
bottom: 0;
right: 0;
border-bottom: 1px solid rgba(117, 255, 30, 1);
border-right: 1px solid rgba(117, 255, 30, 1);
}效果图：
html:
<div class="com-btn-box">
<div class="com-blue-btn-box">
<div class="com-blue-btn-cont flex-center">登录</div>
</div>
<div class="com-white-btn-box">
<div class="com-white-btn-cont"></div>
</div>
</div>css:
//转换成px在rem基础上乘以10
.com-btn-box{
position: relative;
}
.com-blue-btn-box{
width: 32rem;
height: 4.4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
background: linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) bottom right,
linear-gradient(45deg, transparent 12px, rgba(176, 192, 255, 1) 0) bottom left,
linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) top left,
linear-gradient(-135deg, transparent 12px, rgba(176, 192, 255, 1) 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
position: absolute;
left: 0;
top: 0;
z-index: 77;
}
.com-blue-btn-cont {
width: 100%;
height: 100%;
background: linear-gradient(0deg, transparent 0, rgba(0, 52, 255, 1) 0) bottom right,
linear-gradient(45deg, transparent 12px, rgba(0, 52, 255, 1) 0) bottom left,
linear-gradient(0deg, transparent 0, rgba(0, 52, 255, 1) 0) top left,
linear-gradient(-135deg, transparent 12px, rgba(0, 52, 255, 1) 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
font-size: 1.6rem;
font-family: SourceHanSansCN-Medium, SourceHanSansCN;
font-weight: 500;
color: #F6FAFF;
letter-spacing: 1px;
}
.com-white-btn-box{
width: 32rem;
height: 4.4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
background: linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) bottom right,
linear-gradient(45deg, transparent 12px, rgba(176, 192, 255, 1) 0) bottom left,
linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) top left,
linear-gradient(-135deg, transparent 12px, rgba(176, 192, 255, 1) 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
position: absolute;
left: 10px;
top: 10px;
z-index: 66;
}
.com-white-btn-cont {
width: 100%;
height: 100%;
background: linear-gradient(0deg, transparent 0, #fff 0) bottom right,
linear-gradient(45deg, transparent 12px, #fff 0) bottom left,
linear-gradient(0deg, transparent 0, #fff 0) top left,
linear-gradient(-135deg, transparent 12px, #fff 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}效果图：
html：
<div class="white-light-purple-border">
<div class="light-purple-box">
<div
class="light-purple-cont"
></div>
</div>
<div class="white-box">
<div class="white-cont" >
<slot name="borderCont"></slot>
</div>
</div>
</div>css:
//转换成px就在原基础上乘以10
.white-light-purple-border {
position: relative;
}
.light-purple-box {
position: absolute;
left: 1.2rem;
top: 1.2rem;
z-index: 66;
padding: 2px; //边框的宽度
background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
}
.light-purple-cont {
width: 31.5rem;
height: 14rem;
background: linear-gradient(-45deg, transparent 8px, rgba(201, 221, 255, 1) 0);
}
.white-box {
position: absolute;
left: 0;
top: 0;
z-index: 77;
padding: 2px; //边框的宽度
background: linear-gradient(-45deg, transparent 9px, rgba(176, 192, 255, 1) 0);
}
.white-cont {
width: 31.5rem;
height: 14rem;
background: linear-gradient(-45deg, transparent 8px, #fff 0);
}效果图：
div两端有圆弧缺口
html:
<div class="box1 flex-center">
<div class="box2"></div>
</div>
css:
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
width: 160px;
height: 100px;
background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px)
top left,
linear-gradient(0.25turn, #fe8864, #FE5151),
radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px)
bottom right;
background-size: 17px 100px, 116px 100px, 17px 100px;
background-repeat: no-repeat;
background-position: 10px 0px, 26px 0px, 142px 0px;
}
.box2 {
width: 100%;
height: 1px;
border-top: 2px dotted white;
}第二种方法:
html:
<div class="outer">
<div class="inner"></div>
<div class="centerDottedLinePanel">
<div class="flex-center centerDottedLineContent">
<div class="centerDottedLine"></div>
</div>
</div>
</div>css:
.outer {
width: 100%;
height: 40px;
background: rgba(11, 106, 255, 1);
position: relative;
}
.inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-image: radial-gradient(
circle at 0 50%,
transparent 0%,
transparent 20px,
white 20px,
white 100%
);
}
.inner {
position: relative;
height: inherit;
}
.inner:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background-image: radial-gradient(
circle at 100% 50%,
transparent 0%,
transparent 20px,
white 20px,
white 100%
);
}
.centerDottedLinePanel {
width: 100%;
height: 40px;
position: absolute;
top: 0;
left: 0;
}
.centerDottedLineContent {
width: 100%;
height: 40px;
}
.centerDottedLine {
width: 86%;
height: 2px;
border-top: 2px dashed rgba(132, 136, 141, 0.37);
}效果图:
css绘制缺口渐变箭头 （带圆角）
html:
<div id="square" class="flex-center">测试</div>css:
#square {
width: 4.752rem;
height: 1.44rem;
position: relative;
background: linear-gradient(
167deg,
#5ba8ff 0%,
#2b84ff 27%,
#0c6dff 64%,
#0064ff 100%
);
font-size: 0.576rem;
font-weight: 400;
color: #ffffff;
line-height: 1.44rem;
border-top-left-radius: .192rem;
border-bottom-left-radius: .192rem;
}
#square:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: .36rem solid white;
border-top: 0.72rem solid transparent;
border-bottom: 0.72rem solid transparent;
}效果图：
css绘制缺口渐变箭头
html:
<div id="square" class="flex-center">测试</div>css:
#square {
width: 200px;
height: 40px;
position: relative;
background: linear-gradient(347deg, #fcb733 15%, #fdd474 100%);
}
#square:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-left: 20px solid white;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}效果图:
半圆:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.semi-circle{
width: 200px;
height: 100px;/*高度为宽度的一半*/
margin:0 auto;
border-radius: 0 0 100px 100px;/*100px为高度*/
background: rgba(16, 40, 180, 1);/*背景色*/
font-size: 16px;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="semi-circle">
半圆测试测试测试测试测试<br/>
测试测试测试测试测试
</div>
</body>
</html>效果图：
底部为圆弧（第一种方式）:
html:
<div class="topBlueBg"></div>css:
.topBlueBg {
position: relative;
width: 100%;
height: 599px;
text-align: center;
line-height: 50px;
}
.topBlueBg:after {
width: 140%;
height: 599px;
position: absolute;
left: -20%;
top: 0;
z-index: -1;
content: "";
border-radius: 0 0 50% 50%;
background: linear-gradient(134deg, #116eff 0%, #0064ff 100%);
}效果图:
内容自适应重叠框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.mod-wrap-cont{
width: fit-content;/*宽高根据内容自适应*/
margin:0 auto;
background: rgba(16, 40, 180, 1);/*背景色*/
box-shadow:10px 10px 0px rgb(68 235 254 / 80%);/*四边为一样的值只写一次，*/
font-size: 16px;
color: #fff;
padding:50px 16px;
text-align: center;
padding:10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="mod-wrap-cont">
测试测试测试测试测试<br/>
测试测试测试测试测试<br/>
测试测试测试测试测试<br/>
测试测试测试测试测试
</div>
</body>
</html>效果图:
重影按钮:
html:
<div class="title-box">中国宋庆龄基金会</div>
css:
.title-box {
width: fit-content;
padding: 6px 15px;
background: #0B51DB;
box-shadow: 0px 4px 0px -1px rgba(255, 255, 255, 0.5);
border-radius: 18px;
white-space: nowrap;
font-size: 18px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #FFFFFF;
text-shadow: 0px 1px 0px rgba(8, 0, 164, 0.5);
}效果图:
html:
<div class="bg alien"></div>css:
.bg {
width: 240px;
height:160px;
}
// -45deg为右下角，45deg为左下角，-135deg为右上角，135deg为左上角，调整角度即可让缺角显示在对应的位置
.alien {
background: linear-gradient(-45deg, transparent 10px, #fff 0);
}
效果图：
html:
<div class="bg alien1"></div>css:
.bg {
width: 200px;
height: 160px;
}
.alien1 {
margin-top: 2rem;
background: linear-gradient(to left top, transparent 50%, rgba(176, 192, 255, 1) 0) no-repeat
100% 100% / 1.4em 1.4em,
linear-gradient(-45deg, transparent 1em, rgb(18, 245, 207) 0);
}效果图：
html:
<div class="bg alien2"></div>
css:
.bg {
width: 200px;
height: 160px;
}
.alien2{
margin-top: 3rem;
background: radial-gradient(circle at top left, transparent 10px, rgb(18, 245, 207) 0) top left,/* 原理类似*/
radial-gradient(circle at top right, transparent 10px, rgb(18, 245, 207) 0) top right,
radial-gradient(circle at bottom right, transparent 10px, rgb(18, 245, 207) 0) bottom right,
radial-gradient(circle at bottom left, transparent 10px, rgb(18, 245, 207) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}效果图：
html：
<div class="alien3">
<div class="box-alien3">测试啊</div>
</div> css：
.alien3 {
margin-top: 2rem;
width: 100px;
height: 60px;
padding: 3px; //边框的宽度
background: linear-gradient(-45deg, transparent 10px, rgba(176, 192, 255, 1) 0);
}
.box-alien3 {
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 9px, #fff 0);
}效果图：
html:
<div class="com-white-btn-box">
<div class="com-white-btn-cont"></div>
</div>css：
.com-white-btn-box{
width: 32rem;
height: 4.4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
background: linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) bottom right,
linear-gradient(45deg, transparent 12px, rgba(176, 192, 255, 1) 0) bottom left,
linear-gradient(0deg, transparent 0, rgba(176, 192, 255, 1) 0) top left,
linear-gradient(-135deg, transparent 12px, rgba(176, 192, 255, 1) 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.com-white-btn-cont {
width: 100%;
height: 100%;
background: linear-gradient(0deg, transparent 0, #fff 0) bottom right,
linear-gradient(45deg, transparent 12px, #fff 0) bottom left,
linear-gradient(0deg, transparent 0, #fff 0) top left,
linear-gradient(-135deg, transparent 12px, #fff 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}效果图：
html：
<div class="com-white-btn-box">
<div class="com-white-btn-cont"></div>
</div>css:
.com-white-btn-box{
width: 32rem;
height: 4.4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 2px;
background: linear-gradient(-45deg, transparent 8px, rgba(176, 192, 255, 1) 0) bottom right,
linear-gradient(45deg, transparent 8px, rgba(176, 192, 255, 1) 0) bottom left,
linear-gradient(135deg, transparent 8px, rgba(176, 192, 255, 1) 0) top left,
linear-gradient(-135deg, transparent 8px, rgba(176, 192, 255, 1) 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.com-white-btn-cont {
width: 100%;
height: 100%;
background: linear-gradient(-45deg, transparent 8px, #fff 0) bottom right,
linear-gradient(45deg, transparent 8px, #fff 0) bottom left,
linear-gradient(135deg, transparent 8px, #fff 0) top left,
linear-gradient(-135deg, transparent 8px, #fff 0) top right;
background-size: 50% 50%;
background-repeat: no-repeat;
}效果图：
html:
//不能用div等块级元素
<span class="span-class">
<span class="demo1">图文介绍标题图文介绍标题图文介绍标题图文介绍</span></span>css:
.span-class {
position: relative;
overflow: hidden;
z-index: 2;
}
.span-class::after{
content:'';
display: inline-block;
width: 100%;
height: 0.8rem;
position: absolute;
background: #b7d1ff;
top: 60%;
left: 0;
z-index: -1;
}效果图（换行失效）：
html：
//不能用div等块级元素
<span class="test"
>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</span
>css：
.test {
background: linear-gradient(to top, #B7D1FF 70%, transparent 70%);
background-origin: 0;
background-size: 200% 50%;
background-repeat: repeat-x;
background-position: 0 100%;
transition: background-position 0.5s;
background-position: -100% 100%;
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #313774;
line-height: 2.5rem;
}效果图：
html：
<div id="app" v-cloak>
<div class="com-box">
<div class="com-box2">
<div class="com-box3">最简单的方法在最后，可拖至最后查看
若是设置每行显示的个数，则设置子元素的宽度即可，如每行显示三个：则父元素display：flex；flex-wrap: wrap;align-content:
flex-start；子元素：flex：1；width：33.3%； ，这样每个元素占1/3，也就是每行展示三个。
</div>
</div>
</div>
</div>css:
#app{
padding: 20% 10%;
font-size: 16px;
}
.com-box{
background: rgba(255, 232, 135, 1);
}
.com-box2 {
background: rgba(113, 54, 10, 1);
mask: radial-gradient(10px at 0 0, #0000 98%, red) 0 0 /51% 51% no-repeat,
radial-gradient(10px at 100% 0, #0000 98%, blue) 100% 0 /51% 51% no-repeat,
radial-gradient(10px at 0 100%, #0000 98%, green) 0 100%/51% 51% no-repeat,
radial-gradient(10px at 100% 100%, #0000 98%, purple) 100% 100%/51% 51%
no-repeat;
-webkit-mask: radial-gradient(10px at 0 0, #0000 98%, red) 0 0 /51% 51% no-repeat,
radial-gradient(10px at 100% 0, #0000 98%, blue) 100% 0 /51% 51% no-repeat,
radial-gradient(10px at 0 100%, #0000 98%, green) 0 100%/51% 51% no-repeat,
radial-gradient(10px at 100% 100%, #0000 98%, purple) 100% 100%/51% 51%
no-repeat;
padding: 8px;
}
.com-box3{
background: radial-gradient(circle at top left, transparent 10px, rgba(255, 232, 135, 1) 0) top left,
/* 原理类似*/
radial-gradient(circle at top right, transparent 10px, rgba(255, 232, 135, 1) 0) top right,
radial-gradient(circle at bottom right, transparent 10px, rgba(255, 232, 135, 1) 0) bottom right,
radial-gradient(circle at bottom left, transparent 10px, rgba(255, 232, 135, 1) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 12px;
}效果图(纯色背景)：
html:
<div id="app" v-cloak>
<div class="com-box">
<div class="com-box2">
<div class="com-box3">最简单的方法在最后，可拖至最后查看
若是设置每行显示的个数，则设置子元素的宽度即可，如每行显示三个：则父元素display：flex；flex-wrap: wrap;align-content:
flex-start；子元素：flex：1；width：33.3%； ，这样每个元素占1/3，也就是每行展示三个。
</div>
</div>
</div>
</div>css:
#app {
padding: 20% 10%;
font-size: 16px;
}
.com-box {
background: rgba(220, 163, 93, 1);
}
.com-box2 {
background: radial-gradient(circle at top left, transparent 10px, rgba(113, 54, 10, 1) 0) top left,
/* 原理类似*/
radial-gradient(circle at top right, transparent 10px, rgba(113, 54, 10, 1) 0) top right,
radial-gradient(circle at bottom right, transparent 10px, rgba(113, 54, 10, 1) 0) bottom right,
radial-gradient(circle at bottom left, transparent 10px, rgba(113, 54, 10, 1) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 8px;
}
.com-box3 {
background: linear-gradient(180deg, #F9E1AB 0%, #E9C47A 100%);
-webkit-mask:
radial-gradient(10px at 0 0, #0000 98%, red) 0 0 /51% 51% no-repeat,
radial-gradient(10px at 100% 0, #0000 98%, blue) 100% 0 /51% 51% no-repeat,
radial-gradient(10px at 0 100%, #0000 98%, green) 0 100%/51% 51% no-repeat,
radial-gradient(10px at 100% 100%, #0000 98%, purple) 100% 100%/51% 51% no-repeat;
padding:12px;
}效果图（渐变背景）：
更多图形可参考第三方案例（如有侵权，联系删除）：
扫一扫
6945
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
