h5-圆角的使用-案例安卓机器人
Posted fengbrother
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5-圆角的使用-案例安卓机器人相关的知识，希望对你有一定的参考价值。
1.圆角的使用
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div 8 width: 200px; 9 height: 100px; 10 border: 1px solid red; 11 background-color: red; 12 /*添加圆角*/ 13 /*border-radius:10px; 一个值是四个角都一样*/ 14 /*border-radius:10px 30px; 15 第一个值左上 右下 第二个值右上 左下*/ 16 /*border-radius:10px 30px 60px; 17 第一个值是左上 第二个值是右上 和左下 第三个值是右下*/ 18 /*border-radius:10px 30px 60px 80px; 19 遵循左上 右上 右下 左下的顺序*/ 20 21 /*添加椭圆*/ 22 /*border-radius:100px/50px 23 添加/是用来设置当前不同方向的半径 24 水平方向x轴/垂直方向y轴 25 */ 26 border-radius:100px/50px; 27 28 29 /*添加某个角的圆角*/ 30 /*border-top-left-radius: 10px;*/ 31 32 /*设置某个角的不同方向上的不同圆角值*/ 33 /*border-top-left-radius: 100px 50px; 34 border-bottom-left-radius: 100px 50px;*/ 35 36 /*若果四个角的不同方向上的不同圆角值 37 分别是 38 水平方向的：左上 右上 右下 左下/垂直方向：左上 右上 右下 左下 39 */ 40 border-radius: 100px 80px 70px 60px/20px 50px 80px 90px; 41 42 </style> 43 </head> 44 <body> 45 <div></div> 46 </body> 47 </html>
2.安卓机器人小案例：结合伪元素实现
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * 8 margin: 0; 9 height: 0; 10 11 .content 12 width: 500px; 13 height: 500px; 14 border: 1px solid red; 15 margin: 50px auto; 16 17 .an_header 18 width: 250px; 19 height: 125px; 20 background-color: green; 21 margin: 10px auto; 22 border-radius: 125px 125px 0 0; 23 position: relative; 24 25 .an_header::before,.an_header::after 26 content: ""; 27 width: 20px; 28 height: 20px; 29 border-radius: 10px; 30 background-color: #fff; 31 position: absolute; 32 bottom: 40px; 33 34 .an_header::before 35 left: 70px; 36 37 .an_header::after 38 right: 70px; 39 40 .an_body 41 width: 250px; 42 height: 250px; 43 background-color: green; 44 border-radius: 0 0 20px 20px; 45 margin: 0px auto; 46 position: relative; 47 48 .an_body::before, 49 .an_body::after 50 content: ""; 51 width: 30px; 52 height: 180px; 53 position: absolute; 54 background-color: green; 55 top: 30px; 56 border-radius: 10px; 57 58 .an_body::before 59 left: -40px; 60 61 .an_body::after 62 right: -40px; 63 64 .an_footer 65 width: 250px; 66 height: 100px; 67 margin: 0px auto; 68 position: relative; 69 70 .an_footer::before, 71 .an_footer::after 72 content: ""; 73 width: 30px; 74 height: 90px; 75 position: absolute; 76 background-color: green; 77 top: 0px; 78 border-radius: 0 0 10px 10px; 79 80 .an_footer::before 81 left: 50px; 82 83 .an_footer::after 84 right: 50px; 85 86 </style> 87 </head> 88 <body> 89 <div class="content"> 90 <div class="an_header"></div> 91 <div class="an_body"></div> 92 <div class="an_footer"></div> 93 </div> 94 </body> 95 </html>
效果图：
以上是关于h5-圆角的使用-案例安卓机器人的主要内容，如果未能解决你的问题，请参考以下文章