Question

下面的代码在边框内添加了一个带数字的单选按钮，但边框应为圆形，如何使其成为圆形？

请注意，文本的位置对于不受css影响很重要。

 
 p {
 outline-style: solid;
 padding : 16px;
     position: absolute;

 }

<p><input type="radio">1</p>

Answer 1

使用border和border-radius属性代替outline-style：

 p {
   border: 3px solid #000;
   border-radius: 50%;
   height: 45px;  
   line-height: 45px;
   position: absolute;
   text-align: center;
   width: 45px;
 }

<p><input type="radio">1</p>

如您所见，您可能还需要更改高度和宽度元素，以确保元素是一个完美的圆（正好，正方形）。

Answer 2

尝试设置边框然后使用order-radius。

＆＃13;

p {
border: solid 2px black;
     padding : 16px;
     position: absolute;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     }

＆＃13;

<p><input type="radio">1</p>

＆＃13;

在圆形边框中添加文本

2 个答案: