CSS 边框半径在盒子的所有侧面都没有 flex

Question

谁能告诉我为什么，如果我使用 border-radius: 10px 它不会将所有边缘都圆整相同？

#portfolio1
{

    background-image:url("images/bg.png");
    background-repeat: none;

    height: 150px;

    width: 300px;
    float: left;
    margin-top:10px;
    margin-bottom:0px;
    margin-left:10px;
    margin-right:10px;  
    border-radius: 10px;
    /*border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;*/
    /*-webkit-border-radius: 20px;*/
}

请注意，我在尝试不同的东西的地方注释了几行 CSS。我似乎认为，如果我将左右边缘的各个边框值设置为不同，它看起来还不错，但仍然有问题。

也和webkit的一样。我正在使用 chrome，也尝试过使用 firefox，但遇到了同样的问题。可能与我使用的 margin 值有关吗？我还有 portfolio1、portfolio2 和 portfolio3，它们都非常相似，但是当显示在我的网页上时，我每个都使用了两次......如果这有什么不同的话。

感谢您的帮助。

Answer 1

如果你想让所有的边都变成 10px 的圆 Angular ，那么你不需要那么复杂(指定 topright、topleft 等)

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Here's a very useful tool you can use.