[分享]css内圆角与外圆角实现方式

CSS中的圆角是在设计页面时常常运用到的技巧，圆角可以让页面显得更加舒适和美观。圆角的实现方式分为内圆角和外圆角两种，下面将分别介绍这两种实现方式。一、内圆角.box{ borderradius: 1...

CSS中的圆角是在设计页面时常常运用到的技巧，圆角可以让页面显得更加舒适和美观。圆角的实现方式分为内圆角和外圆角两种，下面将分别介绍这两种实现方式。

一、内圆角

.box{
    border-radius: 10px;
} 

内圆角是指将元素的边框四个角变成圆角，且圆角在元素内部，不影响元素的大小。采用内圆角实现，可以使元素内部的边角显得柔和。

二、外圆角

.box{
    border-radius: 10px;
    overflow: hidden;
} 

外圆角是指将元素的边框四个角变成圆角，且圆角在元素外部，影响元素的大小。采用外圆角实现，可以让元素边框圆角变得更加明显。需要注意的是，设置外圆角时需要设置元素的overflow属性为hidden，这样才能让元素的圆角显示出来。

综上所述，举个例子，当需要将一个div元素设置内圆角来减少它的边角时，可以这样写：

<div class="box">我是一段文本</div>

.box{
    border-radius: 10px;
} 

而如果需要将一个图片展示成圆形，可以采用外圆角来实现，代码如下：

<div class="box"><img src="example.jpg"></div>

.box{
    border-radius: 50%;
    overflow: hidden;
    width: 100px;
    height: 100px;
} 

在上述代码中，采用了50%的border-radius让图片展示成圆形，而设置overflow:hidden可以让图片的圆形边框显示出来，width和height属性用于设置图片显示的大小。