[分享]css中 div圆角边框

在CSS中，我们经常会使用到div元素来实现页面布局，而要使div元素有美观的效果，我们可以添加圆角边框。以下是实现div圆角边框的一些方法。1. 使用borderradius属性来设置圆角，代码如下...

在CSS中，我们经常会使用到div元素来实现页面布局，而要使div元素有美观的效果，我们可以添加圆角边框。以下是实现div圆角边框的一些方法。

1. 使用border-radius属性来设置圆角，代码如下：

div {
  border-radius: 10px;
  border: 2px solid #ccc;
} 

上面的代码将div元素的边框设置为2像素的实线边框，圆角半径为10像素。

2. 使用box-shadow属性来设置圆角，代码如下：

div {
  box-shadow: 0 0 0 10px #ccc;
} 

上面的代码将div元素的边框设置为10像素的阴影，其余参数为0。

3. 使用伪元素来实现圆角，代码如下：

div:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 5px 0 0 0;
  background-color: #ccc;
  position: absolute;
  left: 0;
  top: 0;
}
div:after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 0 5px 0 0;
  background-color: #ccc;
  position: absolute;
  right: 0;
  top: 0;
} 

上面的代码使用伪元素:before和:after来实现左上和右上的圆角，其中content属性为空，display属性为块级元素，宽高为10像素，border-radius属性用来设置圆角，background-color属性用来设置背景颜色，position属性为绝对定位，left和top属性用来设置位置。

总的来说，使用border-radius属性来设置圆角边框是最简单的方法，但在某些情况下，其他方法也是有用的。