经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手_HTML/Xhtml
来源:jb51  时间:2021/5/10 17:19:50  对本文有异议

很多小伙伴在前端学习的时候,发现盒子模型默认为正方形。如何把盒子变成想要的模型呢? 首先我们来看一下默认的情况----

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=, initial-scale=1.0">
  7. <style>
  8. .box{
  9. width: 100px;
  10. height: 100px;
  11. background-color: rgb(116, 51, 51);
  12. box-shadow:0 10px 10px red;
  13. text-align: center;
  14. position:absolute;
  15. margin:0 auto;
  16. left:0;
  17. right:0;
  18. bottom:0;
  19. top:0;
  20.  
  21. }
  22. </style>
  23. <title>Document</title>
  24. </head>
  25. <body>
  26. <div class="box">
  27.  
  28. </div>
  29. </body>
  30. </html>

在这里插入图片描述

默认情况下为正方形,也许小伙伴觉得不太好看。 我们换成圆形的试试!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style>
  8. .box{
  9. width: 100px;
  10. height: 100px;
  11. border-radius: 50%;
  12. background-color: rgb(28, 99, 60);
  13. border: 5px solid rgb(55, 0, 255);
  14. position: absolute;
  15. margin: 0 auto;
  16. left: 0;
  17. right: 0;
  18. bottom: 0;
  19. top: 0;
  20. }
  21. </style>
  22. <title>Round</title>
  23. </head>
  24. <body>
  25. <div class="box">
  26.  
  27. </div>
  28. </body>
  29. </html>

在这里插入图片描述

看一下我们变成了圆形! 来看看半圆形的吧!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style>
  8. .box{
  9. width: 100px;
  10. height: 50px;
  11. background-color: rgb(175, 42, 216);
  12. border: 3px solid rgb(26, 236, 26);
  13. border-top-right-radius: 50px;
  14. border-top-left-radius: 50px;
  15. position:absolute;
  16. margin: 0 auto;
  17. left: 0;
  18. right: 0;
  19. bottom: 0;
  20. top: 0;
  21. }
  22. </style>
  23. <title>semicircle</title>
  24. </head>
  25. <body>
  26. <div class="box">
  27.  
  28. </div>
  29. </body>
  30. </html>

在这里插入图片描述

来试试其他形状!

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style>
  8. .box{
  9. width: 100px;
  10. height: 100px;
  11. background-color: rgb(82, 84, 223);
  12. border-radius: 20px 15px 20px 10px;
  13. position: absolute;
  14. margin: 0 auto;
  15. left: 0;
  16. bottom: 0;
  17. right: 0;
  18. top: 0;
  19. }
  20. </style>
  21. <title>demo</title>
  22. </head>
  23. <body>
  24. <div class="box">
  25.  
  26. </div>
  27. </body>
  28. </html>

在这里插入图片描述

知识点分析:

border-radius:给元素设置圆角边框
可以实现圆,半圆,椭圆,四分之一圆等各种圆角图形。
可以设置四个值,分别为左上,右上,右下,左下
给个口诀,“从左上开始顺时针移动”。。。

希望这篇文章能让你学会border-radius属性!

到此这篇关于HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单上手的文章就介绍到这了,更多相关html css盒子模型内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号