掌握了圆角边框标签就可以做出类似百度搜索框的效果来
圆角边框-上
代码：
<!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>
div{
width: 100px;
height: 200px;
background-color: yellowgreen;
margin:0 auto;
/* border-radius:10px 0px 0px 0px; */
/* border-radius：后跟px 和 %
把四个角用弧线连起来，或者说把角用弧线代替
弧线可以理解为圆角程度，值越大圆角程度越大
v1，v2 分别代表 左上右下 右上左下
v1,v2,v3 分别代表 左上 左下右上 右下
v1,v2,v3,v4 分别代表 左上 右上 右下 左下 是顺时针方向旋转
*/
border-top-left-radius:10px;
/* 同样的，也可以设置单独的一个角为圆角
表示左上角先设置left，后设置top是不行的，必须是top在前，left在后、
需保证垂直方向在前，水平方向在后
border-left-top-radius：10px；错误
border-top-left-radius：10px；正确
*/
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 80px;
}
</style>
</head>
<body>
<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>
div{
width: 200px;
height: 200px;
background-color: brown;
margin:0 auto;
padding: 20px;
border:20px solid yellowgreen;
/* border-radius:30px/60px; */
/*
30px/60px-表示水分方向上圆弧程度30px，垂直方向上圆弧程度60px 只能在border-radius:30px/60px;这种写法上生效
*/
/* border-top-left-radius:20px/80px;
这么写是不生效的，因为不支持这种写法 */
/* border-radius: 10px 20px 30px 40px/50px 60px 70px 80px; */
border-radius: 100%;
/* 可以设置成px 或 百分比% */
/* 想要让它变成圆形，需要设置成盒子的一半
注意：盒子的一半是需要算上内外边距的，当然，若是直接用百分比的话，就可以省去计算这一步了，直接设置个50%就可以了；还有一点要注意的是，只要它大于等于百分之50，就都是圆形，也就是说直接设置成100%效果也是一样的
*/
}
</style>
</head>
<body>
<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>
div{
width: 500px;
height: 250px;
background-color: chartreuse;
margin:0 auto;
border-radius: 10%;
/* 在长方体上设置圆角标签最好用px，因为设置百分比的话，拿10%来举例：10%设置出来，它的长和宽是不一样的，所以设置出来的圆角也不会对称
用px比较好拿捏
*/
}
</style>
</head>
<body>
<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>
div{
width: 100px;
height: 50px;
margin:0 auto ;
background-color: cornflowerblue;
/* border-top-left-radius:50px ;
border-top-right-radius:50px ; */
border-radius: 50px 50px 0px 0px;
/* 设置成半圆 */
}
</style>
</head>
<body>
<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>
div{
width: 200px;
height: 200px;
background-color: yellowgreen;
border-radius: 200px 0px 0px 0px;
margin:0 auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/233922.html原文链接：https://javaforall.net
