最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

css如何使用利用border和border-radius绘制一些小图形(代码实例)

来源:懂视网 责编:小采 时间:2020-11-02 22:08:25
文档

css如何使用利用border和border-radius绘制一些小图形(代码实例)

css如何使用利用border和border-radius绘制一些小图形(代码实例):在页面开发中,常常需要一些小图形来美化页面。这些图形可以用图片形式展现,但页面每次加载图片需要花费时间,那么用css如何实现这些图形?本章就给大家介绍css如何使用利用border和border-radius绘制一些小图形(代码实例)。有一定的参考价值,有需要的朋
推荐度:
导读css如何使用利用border和border-radius绘制一些小图形(代码实例):在页面开发中,常常需要一些小图形来美化页面。这些图形可以用图片形式展现,但页面每次加载图片需要花费时间,那么用css如何实现这些图形?本章就给大家介绍css如何使用利用border和border-radius绘制一些小图形(代码实例)。有一定的参考价值,有需要的朋
在页面开发中,常常需要一些小图形来美化页面。这些图形可以用图片形式展现,但页面每次加载图片需要花费时间,那么用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>

效果图:

1.png

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>

效果图:

2.png

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>

效果图:

3.png

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>

效果图:

4.png

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>

效果图:

5.png

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>

效果图:

6.png

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>

效果图:

7.png

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

css如何使用利用border和border-radius绘制一些小图形(代码实例)

css如何使用利用border和border-radius绘制一些小图形(代码实例):在页面开发中,常常需要一些小图形来美化页面。这些图形可以用图片形式展现,但页面每次加载图片需要花费时间,那么用css如何实现这些图形?本章就给大家介绍css如何使用利用border和border-radius绘制一些小图形(代码实例)。有一定的参考价值,有需要的朋
推荐度:
标签: 图形 绘制图形 css
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top