html生成橢圓ROHS樣式
當(dāng)前位置：點晴教程→知識管理交流
→『 技術(shù)文檔交流 』
 ：html生成橢圓ROHS樣式 <!DOCTYPE html> <html> <head> <title>橢圓及文字</title> <style> .oval-container { position: relative; /* 關(guān)鍵：設(shè)置為相對定位，以便絕對定位文字 */ width: 60px; /* 橢圓的寬度 */ height: 30px; /* 橢圓的高度 */ } .oval { width: 100%; /* 繼承容器寬度 */ height: 100%; /* 繼承容器高度 */ border-radius: 50%; /* 使其成為橢圓 */ background-color: none; /* 橢圓顏色 */ /* 其他橢圓樣式：邊框等 */ border: 2px solid black; } .oval-text { position: absolute; /* 關(guān)鍵：絕對定位 */ 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 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
