使用`border-radius`创建一个圆形

我正在阅读Jon Duckett的HTML和CSS，并已被引入到border-radius属性中。使用`border-radius`创建一个圆形

我想用下面的代码创建一个圆圈，但圆圈并不完美。我使用的是半径50px，但它并不完美。

p { border: 5px solid #ee3e80; padding: 10px; width: 100px; height: 100px; display: inline-block; margin: 20px; } p.three { padding: 0px; border-radius: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; }

<p class="three"></p>

我在做什么错？

来源

2017-08-09 Dave Smith

对于'border-radius'属性，您不应该使用供应商preixes，因为它们适用于非常旧的浏览器（Firefox 4-，Chrome 4-，Safari 5-）。 –

padding和border的宽度被另外计算到width和你的元素的height。

你有不同的选择来解决这个问题：

添加box-sizing: border-box到你的元素，它定义什么应该包括在大小计算
使用border-radius: 50%
添加您的边框宽度和填充到您border-radius 。

这里的解决方案只是box-sizing

p { 
 
    display: inline-block; 
 

 
    margin: 20px; 
 
    width: 100px; 
 
    height: 100px; 
 

 
    /* these values get added to your 100px by default */ 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    
 
    /* now width and height determine how big your 
 
    element is as a whole */ 
 
    box-sizing: border-box; 
 
}

<p class="three"></p>

有关CSS盒模型看this article from MDN更详细的解释。

来源

2017-08-09 18:47:05 lumio

它应该是50%而不是50px。无论元素的大小如何，50%都将绘制一个圆。如果元素足够小，设置像素值将只绘制一个圆。

见下文。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

来源

2017-08-09 18:45:34

这是因为你没有考虑到边界宽度来的宽度，每边都是5px。所以总宽度是110px，所以你的边界半径将需要为55px。更简单的方法是将border-radius设置为50%。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

来源

2017-08-09 18:47:06 zsawaf

你只需要添加50%到border-radius财产。下面是一个片段，你会发现它是一个完美的圆圈。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
}

<p class="three"></p>

来源

2017-08-09 18:49:44 user5854648

没有理由像素值不应该工作。这并不能解释实际问题。 – isherwood

另一种选择是你的元素的box-sizing属性设置为border-box（如我的几乎所有元素做）。

p { 
 
    border: 5px solid #ee3e80; 
 
    padding: 10px; 
 
    width: 100px; 
 
    height: 100px; 
 
    display: inline-block; 
 
    margin: 20px; 
 
    box-sizing: border-box; /* < -------------------- here */ 
 
} 
 

 
p.three { 
 
    padding: 0px; 
 
    border-radius: 50px; 
 
    -moz-border-radius: 50px; 
 
    -webkit-border-radius: 50px; 
 
}

<p class="three"></p>

Border-box考虑到边境做数学的时候，一般当全线采用简化的布局和样式。像Bootstrap的库do this for you。

来源

2017-08-09 18:55:16 isherwood

使用`border-radius`创建一个圆形

回答

相关问题