html只设置两个圆角

在编写网页时，我们经常需要设置圆角。而如果使用CSS3的border-radius属性，可以轻松实现四个角都为圆角的效果，但是如果只想设置其中两个圆角怎么办呢？下面我们来介绍一下如何只设置两个圆角。

.border{
  width: 200px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  overflow: hidden; /*设置为隐藏，将超出部分隐藏掉*/
}
.border:before{
  content: "";
  width: 50px;
  height: 50px;
  background-color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0 0 50px; /*只设置右上角为圆角*/
}

上述代码是通过添加伪元素:before来实现设置右上角为圆角的效果的。具体思路是：通过absolute定位将伪元素移到右上角，再利用border-radius属性将左下角的圆角去掉，从而形成右上角的圆角。当然，也可以设置左上角和右下角的圆角，只需要将上述代码中的:before改为:after，并将right改为left即可。

通过上述方法可以方便地实现只设置两个圆角。需要注意的是，由于该方法利用伪元素实现，所以需要将元素的position属性设置为relative或者absolute，而且需要设置overflow:hidden，将超出部分隐藏掉。