今日前端练习底部弧度效果+按钮加减
效果图
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
//css部分
<style type="text/css">
.box {
width: 900px;
overflow: hidden;
left: 50%;
/* 定位父级的50% */
top: 50%;
right: 50%;
margin:auto;
position:absolute;
transform: translate(-50%, -50%);
}
.box_top {
position: relative;
width: 100%;
height: 100px;
text-align: center;
line-height: 50px;
}
.box_top:after {
width: 140%;
height: 100px;
position: absolute;
left: -20%;
top: 0;
z-index: -1;/* 层叠顺序 */
content: '';
border-radius: 0 0 50% 50%;
background: #27AE61;
}
#jian{
text-align: center;
width: 50px;
height: 38px;
border: 2px wheat;
}
#jia{
text-align: center;
width: 50px;
height: 38px;
border: 2px wheat;
}
#but{
text-align: center;
width: 20px;
height: 20px;
}
</style>
//js部分
<script>
var sum=0;
function jian(){
sum--;
if(sum<0) sum=0;
document.getElementById("but").value=sum;
}
function jia(){
sum++;
document.getElementById("but").value=sum;
}
</script>
</head>
<body>
<div class="box">
<div class="box_top">
<div class="box_top">
<span>画弧度</span>
<span><input id="but" type="text" value="0"/></span>
<p><input name="-" id="jian" type="button" value="-" onclick="jian()"/>
<input name="+" id="jia" type="button" value="+" onclick="jia()"/></p>
</div>
</div>
</div>
</body>
做的较简单，大体看一下
1222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
