border-radius介绍及半圆切换案例
2022-07-08 本文已影响0人
程序猿的小生活
<html>
<head>
<script src="js/jquery.js"></script>
<meta charset="utf-8">
<title>border-radius介绍及半圆切换案例</title>
</head>
<body>
<div id="aa" style="display: flex;justify-content: center;">
<span class="a c" >进行中主题</span>
<span class="d b">已结束主题</span>
</div>
</body>
<script>
//border-radius:0px 50px 50px 0px; 依次按顺时针方向控制
//第一个参数控制左上角
//第二个参数控制右上角
//第三个参数控制 右下角
//第四个参数控制 左下角
$(function(){
$("#aa>span").click(function(){
$(this).addClass("c").removeClass("b").siblings("span").addClass("b").removeClass("c")
})
})
</script>
<style>
.a{
min-width: 200px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius:50px 0px 0px 50px;
}
.d{
min-width: 200px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius:0px 50px 50px 0px;
}
.b{
background-color: aliceblue;
color: red;
border: 1px solid red;
}
.c{
background-color:red;
color: aliceblue;
border: 1px solid red;
}
</style>
</html>
