css 两边变圆

在网页设计中，有时我们会需要将一个矩形框的两边变成圆形，以美化页面的效果。在CSS中，我们可以使用border-radius属性来实现这个效果。

.box {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

在上面的代码中，我们可以看到我们使用了四个属性，分别是border-top-left-radius、border-top-right-radius、border-bottom-left-radius和border-bottom-right-radius。这四个属性控制了矩形框四个角的圆角程度，数值越大，圆角越显著。

如果我们只需要让矩形框的两个相邻边变成圆角，可以这样写：

.box {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
    

在这个例子中，我们将bottom-left和bottom-right的圆角属性设为0即可只实现一侧圆角效果。

总的来说，使用CSS的border-radius属性可以轻松地实现矩形框两边圆角的效果，以实现美化网页的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！