CSS3 Background 圆角

CSS3 Background圆角功能可以很容易地为元素添加圆角效果，这意味着你不再需要使用图片来制作元素的圆角，这同时也意味着在浏览器缩放时圆角依然效果良好。

要在CSS3中为元素添加圆角，你会使用“border-radius”属性。这个属性允许你为元素的四个角分别指定圆角的大小。

.box { 
width: 200px; 
height: 200px; 
border-radius: 10px;
}

在上面的例子中，我们创建了一个200 x 200像素的盒子（元素）并将其四个角的半径设置为10像素。你也可以同时指定水平和垂直方向的半径大小。

.box{
width: 200px;
height: 200px; 
border-bottom-left-radius: 20px;  
border-top-right-radius: 30px;
}

在这个例子中，我们使用了“border-bottom-left-radius”和“border-top-right-radius”属性来为元素的两个角指定不同的半径。

除了使用“border-radius”属性之外，我们还可以使用“background-clip”属性来定义背景样式的截断方式。在这里，我们可以使用“padding-box”值来使背景样式被元素的内边距包含，而不是被元素的边框包含。

.box { 
width: 200px; 
height: 200px;    
border-radius: 10px; 
background-clip: padding-box;
}

总的来说，CSS3 Background圆角是一个非常实用的功能，使得我们在设计和布局网站时更加方便和灵活。