一个像素，纯CSS2圆形按钮

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个像素，纯CSS2圆形按钮相关的知识，希望对你有一定的参考价值。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title></title>
  6.  
  7.  
  8. <style type="text/css">
  9. <!--
  10. ul.round { margin: 0; padding: 0; border: 0; list-style-type: none; text-align: center; float: left; clear: left; }
  11. ul.round li, ul.round li a, ul.round li b { display: block; margin: 0; padding: 0; float: left; }
  12.  
  13. /* configure (backgrounds + margins + heights) here */
  14. ul.round li { margin-right: 5px; background: #069; }
  15. ul.round li a { height: 32px; text-decoration: none; color: #fff; cursor: pointer; }
  16. ul.round li a:hover { background: #000; }
  17. ul.round li b { width: 1px; height: 30px; border-bottom: #fff 1px solid; border-top: #fff 1px solid; }
  18. ul.round li span { padding: 10px; line-height: 10px; float: left; }
  19. -->
  20. </style>
  21.  
  22.  
  23. </head>
  24.  
  25. <body>
  26.  
  27.  
  28.  
  29. <ul class="round">
  30. 	<li><a href="#"><b></b><span>test</span><b></b></a></li>
  31. 	<li><a href="#"><b></b><span>big test</span><b></b></a></li>
  32. 	<li><a href="#"><b></b><span>bigger test</span><b></b></a></li>
  33. </ul>
  34.  
  35.  
  36.  
  37. </body>
  38. </html>

以上是关于一个像素，纯CSS2圆形按钮的主要内容，如果未能解决你的问题，请参考以下文章

带有图像和圆形进度条的圆形按钮

圆形自定义按钮的活动区域较小

将图像裁剪为正方形，然后使用纯 CSS 进行圆形？

给定一个图像，一个像素点和一个以像素为单位的半径。如何找到它创建的圆形边框的像素坐标

UIImageView.layer.cornerRadius 在不同像素密度上创建圆形图像的问题 ios

如何使所有绘制的（矩形、圆形、线条、多边形）可拖动？纯JS