CSS3实现DIV圆角效果完整代码

最新推荐文章于 2021-06-08 11:56:49 发布

转载最新推荐文章于 2021-06-08 11:56:49 发布 · 1k 阅读

Css 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何使用CSS3的border-radius属性实现圆角效果。通过一个简单的实例展示了该属性的具体用法，并指出了适用于哪些现代浏览器。对于前端开发者来说，这是一个很好的实践案例。

<style type="text/css"> 
#yuanjiao
{ 
font-family: Arial; 
border: 2px solid #379082; 
border-radius: 20px 0px 0px 20px; /*上 右 下 左*/ 
padding: 30px 30px; 
width: 330px; 
}
</style> 
<div id="yuanjiao"> 
本实例是CSS3实现DIV圆角。实现圆角的CSS3代码句是： "border-radius: 20px;" 。需使用支持CSS3的浏览器运行,例如新版的Chrome、火狐，或者IE9。IE6、7、8不支持。

脚本之家CSS3教程

</div>