CSS绘制圆角矩形图形的效果

2015-07-30    分类: 网站建设

我们在给矩形的四角进行圆角处理时,我们早期,都是采用片图来完成,这无疑是给网页的加载增加了负担,大量的图片载入在网页里,流量消耗,对手机用户是一刺痛的。给网页及APP的加载速度,无疑是我们一直研究的方向。下面我们来们看看,如何给矩形圆角下处理,使其达到我们的预期效果,又少用JPG等图片元素。首先,会CSS的朋友,需要注意到CSS里的border-radius属性,(英语方面的大咖小咖们,都注意到了radius翻译是“半径”,border是指边沿、边界、镶边。border-radius意思为“边框半径”)所以我们对它的定义,只需要给个值就可以了。详细见下面的例子:

圆角矩形效果语法border-radius:12px;

聪明的你,是否已想到了举一反三的?我们只给某一个角定义圆弧效果?是啦,下面我们来看看其它的一些圆弧效果:


单个角度圆弧果语法


border-top-left-radius:6px;


对角圆弧,弧度大小不同的效果语法


border-top-left-radius:6px;
border-top-right-radius:12px;


我们对四个角可以同时设置1到4个值。如果设置1个值,表示4个圆角都使用这个值。如果设置两个值,表示左上角和右下角使用第一个值,右上角和左下角使用第二个值。如果设置三个值,表示左上角使用第一个值,右上角和左下角使用第二个值,右下角使用第三个值。如果设置四个值,则依次对应左上角、右上角、右下角、左下角(顺时针顺序)。根据上述的效果,你是否会脑洞大开,如果我们定义圆,是否可以用这个方法,答案是肯定的。我们在写圆的代码时,也是这样定义的。只需要把


borde-radius:50%;

文章题目:CSS绘制圆角矩形图形的效果
网站网址:https://www.cdcxhl.com/news/32134.html

成都网站建设公司_创新互联,为您提供App开发微信公众号用户体验网页设计公司动态网站网站维护

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

小程序开发