html生成椭圆ROHS样式
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
 ：html生成椭圆ROHS样式 <!DOCTYPE html> <html> <head> <title>椭圆及文字</title> <style> .oval-container { position: relative; /* 关键：设置为相对定位，以便绝对定位文字 */ width: 60px; /* 椭圆的宽度 */ height: 30px; /* 椭圆的高度 */ } .oval { width: 100%; /* 继承容器宽度 */ height: 100%; /* 继承容器高度 */ border-radius: 50%; /* 使其成为椭圆 */ background-color: none; /* 椭圆颜色 */ /* 其他椭圆样式：边框等 */ border: 2px solid black; } .oval-text { position: absolute; /* 关键：绝对定位 */ top: 50%; /* 垂直居中 */ left: 50%; /* 水平居中 */ transform: translate(-50%, -50%); /* 精确居中，抵消自身宽高 */ font-size: 10px; /* 文字大小 */ color: black; /* 文字颜色 */ font-weight: bold; /* 文字加粗 */ } </style> </head> <body> <div style="position:relative; width:60px;height:30px;"> <div style="width:100%;height:100%;border-radius:50%;background-color:none;border:2px solid black; "></div> <div style="position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);font-size:10px;color:black;font-weight: bold;">RHOS</div> </div> <svg width="60" height="30"> <ellipse cx="50%" cy="50%" rx="45%" ry="40%" style="fill:none;stroke:black;stroke-width:2" /> <text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" font-size="10" font-family="sans-serif" fill="black">RHOS</text> </svg> </body> </html> 该文章在 2025/4/19 15:39:44 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
