css制作圆⾓矩形,CSS绘制圆⾓矩形图形的效果
我们在给矩形的四⾓进⾏圆⾓处理时，我们早期，都是采⽤⽚图来完成，这⽆疑是给⽹页的加载增加了负担，⼤量的图⽚载⼊在⽹页⾥，流量消耗，对⼿机⽤户是⼀刺痛的。给⽹页及APP的加载速度，⽆疑是我们⼀直研究的⽅向。下⾯我们来们看看，如何给矩形圆⾓下处理，使其达到我们的预期效果，⼜少⽤JPG等图⽚元素。⾸先，会CSS的朋友，需要注意到CSS⾥的border-radius属性，(英语⽅⾯的⼤咖⼩咖们，都注意到了radius翻译是“半径”，border是指边沿、边界、镶边。border-radius意思为“边框半径”)所以我们对它的定义，只需要给个值就可以了。详细见下⾯的例⼦：
圆⾓矩形效果语法border-radius：12px;
聪明的你，是否已想到了举⼀反三的？我们只给某⼀个⾓定义圆弧效果？是啦，下⾯我们来看看其它的⼀些圆弧效果：
单个⾓度圆弧果语法
border-top-left-radius:6px;
对⾓圆弧，弧度⼤⼩不同的效果语法
border-top-left-radius:6px;border radius什么意思
border-top-right-radius:12px;
我们对四个⾓可以同时设置1到4个值。如果设置1个值，表⽰4个圆⾓都使⽤这个值。如果设置两个值，表⽰左上⾓和右下⾓使⽤第⼀个值，右上⾓和左下⾓使⽤第⼆个值。如果设置三个值，表⽰左上⾓使⽤第⼀个值，右上⾓和左下⾓使⽤第⼆个值，右下⾓使⽤第三个值。如果设置四个值，则依次对应左上⾓、右上⾓、右下⾓、左下⾓(顺时针顺序)。根据上述的效果，你是否会脑洞⼤开，如果我们定义圆，是否可以⽤这个⽅法，答案是肯定的。我们在写圆的代码时，也是这样定义的。只需要把
borde-radius:50%;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。