方法一:使用两个div进行实现
1、两个div,一个在里面
2、里面的那个用 z-index 和 position 覆盖外面的那个
3、两个都进行圆角
下面展示一些 内联代码片
。
css样式
.button1{//外面的div
height:90px;
width: 200px;
float: right;
margin-right:35px;//这里的两个margin 看你需不需要
margin-top: 30px;
font:400 0.3rem/90px "Microsoft Yahei";
text-align: center; 颜色自定:我这颜色比较相近
background:linear-gradient(to bottom right, #c07654, #ff2b06);//这里是渐变
border-radius: 40px;
}
.indextext{//里面的div
height:86px;
width: 196px;
margin-left:2px;//这里的两个margin 看你需不需要
margin-top: 2px;
font:400 0.3rem/86px "Microsoft Yahei";
text-align: center;
position: absolute;//覆盖在上面
z-index: 1px;
color: rgb(250, 110, 110);
background: rgb(255, 255, 255);
border-radius: 40px;
}
效果图