[分享]css3左上角直角

CSS3中的左上角直角可以通过borderradius属性来实现。borderradius属性可以为一个元素设置四个圆角半径值，分别对应左上、右上、右下、左下四个角。示例代码: .round { wi...

CSS3中的左上角直角可以通过border-radius属性来实现。border-radius属性可以为一个元素设置四个圆角半径值，分别对应左上、右上、右下、左下四个角。

示例代码:
.round {
    width: 100px;
    height: 100px;
    background-color: #f00;
    border-top-left-radius: 10px;
} 

在上面的示例代码中，我们为元素.round设置了10px的左上角圆角半径值，这将使其左上角呈现一个直角。

如果我们需要将元素的四个角分别设置为不同的圆角半径值，可以像下面这样写：

示例代码:
.round {
    width: 100px;
    height: 100px;
    background-color: #f00;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
} 

在这个示例中，我们为元素.round的四个角分别设置了不同的圆角半径值，分别是10px、20px、30px和40px。这将使元素的四个角呈现不同的圆角效果。

总之，通过border-radius属性，我们可以在CSS3中轻松实现带有左上角直角的元素效果。