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

作者:风筝 | 创建时间: 2023-03-25
css 圆角是一种常用的页面处理方式,css1及css2的处理方式是采用背景图片的方式处理的;css3处理的方式浏览器支持的原生的,使用样式属性border-radius。 本文重点讲解的是基于css3的处理方式。...
css 圆角 css圆角 css3 圆角代码实现

操作方法

CSS3圆角处理的方式: <div id="yuanjiao"></div> #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;

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

点击展开全文

更多推荐