爱学网
当前位置 : 爱学网 > 经验 > 学习经验 > css 圆角 css圆角 css3 圆角代码实现

css 圆角 css圆角 css3 圆角代码实现

更新时间:2026-05-05 19:23:54

css 圆角是一种常用的页面处理方式,css1及css2的处理方式是采用背景图片的方式处理的;css3处理的方式浏览器支持的原生的,使用样式属性border-radius。

本文重点讲解的是基于css3的处理方式。

操作方法

01

CSS3圆角处理的方式:

#yuanjiao{padding:10px;width:300px;height:100px;border: 3px solid #dedede;-moz-border-radius: 25px; /* 火狐浏览器 */-webkit-border-radius: 25px; /* 谷歌和Safari浏览器 */border-radius:25px; /* W3C 语法支持的浏览器 */}border-radius:5px 15px 20px 25px;四个参数的方位:上、右、下、左也可以分开写border-top-left-radius: 20px;border-top-right-radius: 20px;border-bottom-right-radius: 20px;border-bottom-left-radius: 20px;

02

书写次序需要注意,要按照一下次序书写/* 火狐浏览器 */-moz-border-radius: 25px;/* 谷歌和Safari浏览器 */-webkit-border-radius: 25px;/* W3C 语法支持的浏览器 */border-radius:25px;