[分享]css中div怎么变成圆角矩形

p标签：CSS中的div如何变成圆角矩形 pre标签： div { borderradius: 10px; } CSS是一门可以通过样式来控制网页元素的设计语言，其中的div是一个经常被用到的元素。当...

p标签：CSS中的div如何变成圆角矩形
pre标签： div { border-radius: 10px; }
CSS是一门可以通过样式来控制网页元素的设计语言，其中的div是一个经常被用到的元素。当我们想要美化我们的网页时，我们通常希望将这些div变成圆角矩形，就像下面这样：
但是，这个圆角矩形是如何实现的呢？其实非常简单，只需在CSS中加上一个新的属性：border-radius。具体代码如下所示：
pre标签： div { border-radius: 10px; }
border-radius这个属性可以设置圆角的大小，而单位通常为px或em。上例中的10px表示这个div的圆角大小为10个像素。
使用border-radius属性的好处是，不需要图片或其他复杂的HTML代码，只靠CSS就能实现圆角效果。这比用图片来实现要方便得多。而且，使用border-radius效果不会受到网速的影响，在不同的平台上都能得到相同的效果。
除了设置圆角大小，还可以通过设置border-radius的四个参数来实现不同的圆角效果。这四个参数分别对应左上、右上、右下和左下四个角。下面是一个例子：
pre标签： div { border-radius: 10px 0 0 10px; }
这个例子中的圆角效果只在左下和左上两个角处，而右边两个角则没有。参数的顺序为顺时针方向，从左上开始。
总之，border-radius这个属性正如其名字那样，可以让我们方便地设置圆角的大小和位置。使用border-radius，我们可以让我们的网页看起来更加美观和现代化。