Rumah >hujung hadapan web >tutorial css >css如何使用利用border和border-radius绘制一些小图形（代码实例）
css如何使用利用border和border-radius绘制一些小图形（代码实例）
- 青灯夜游asal
- 2018-09-21 17:45:424300semak imbas
在页面开发中，常常需要一些小图形来美化页面。这些图形可以用图片形式展现，但页面每次加载图片需要花费时间，那么用css如何实现这些图形？本章就给大家介绍css如何使用利用border和border-radius绘制一些小图形（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
大都知道border属性有四个参数，那么border－radius必然也是有四个参数
我们知道border属性的四个参数分别是border-top,border-right,border-bottom,border-left.(按顺时针方向)
那么border-radius四个参数是什么了？
border-radius:上左，上右，下右，下左；
下面我们利用border-radius绘制一些大家平时常见的图片。
1.简单的圆形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>效果图：
2.椭圆
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
width: 100px;
height: 200px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>效果图：
3.心型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
position: relative;
width: 200px;
height: 180px;
border: 1px solid black;
}
.left{
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 170px;
background: red;
/*左下角为旋转基点*/
transform-origin: 0 100%;
transform: rotate(-45deg);
border-radius: 50% 50% 0 0;
/*让left的上左和上右变成圆形就可以*/
}
.right{
position: absolute;
top: 0;
left: 0px;
width: 100px;
height: 170px;
background: red;
/*右下角为旋转基点*/
transform-origin: 100% 100%;
transform: rotate(45deg);
border-radius: 50% 50% 0 0;
/*让right的上左和上右变成圆形就可以*/
}
</style>
</head>
<body>
<div id="div">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>效果图：
4.鸡蛋
我们听说达芬奇画鸡蛋，我在这里用css画鸡蛋
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
position: relative;
width: 100px;
height: 180px;
background: red;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*border-radius参数在／左右的区别，／左边是四个圆角的水平半径／右边是四个圆角垂直半径*/
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>效果图：
5.对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div {
width: 120px;
height: 80px;
background: red;
position: relative;
border-radius: 10px;
margin-left: 50px;
}
#div:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>效果图：
6.阴阳八卦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#baGua {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#baGua:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 50%;
width: 12px;
height: 12px;
}
#baGua:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="baGua">
</div>
</body>
</html>效果图：
7.无穷符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wuQ{
position: relative;
width: 212px;
height: 100px;
}
#wuQ:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
/*下右不变圆弧*/
transform: rotate(-45deg);
}
#wuQ:after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 50px 0;
/*下左不变圆弧*/
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="wuQ">
</div>
</body>
</html>效果图：
Atas ialah kandungan terperinci css如何使用利用border和border-radius绘制一些小图形（代码实例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css中如何设置hr的样式？css <hr>标签多种样式（图文）Artikel seterusnya：分享三种给li标签添加图标的方法