css一边圆角一般直角

CSS中可以通过border-radius属性来实现元素的圆角化。当我们想要一边是圆角，另一边是一般的直角时，我们需要用到border-radius的两个关键字： border-top-left-radius 和 border-bottom-right-radius。

 .box {
    width: 200px;
    height: 150px;
    background-color: #f2f2f2;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
  } 

上面代码中，我们使用了border-top-left-radius来让元素左上角变成圆角，同时使用了border-bottom-right-radius来让元素右下角变成圆角。

如果我们想实现一边圆角，一边直角，只需要将其中一个关键字的值设置为0，另一个关键字的值设置为所需要的圆角半径即可。

 .box {
    width: 200px;
    height: 150px;
    background-color: #f2f2f2;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0px;
  } 

上面代码中，我们将border-top-left-radius设置为20px来实现左上角的圆角，同时将border-bottom-right-radius设置为0来实现右下角的直角。

CSS的border-radius属性可以帮助我们快速简便地实现各种元素的圆角效果，让页面变得更加美观。同时，我们也可以利用它的实现一边圆角一般直角的效果，达到更多的设计效果。