模板X

位置: 破奇网  建站教程  网页知识

网页的圆角框框是怎么做的,CSS3做圆角边框

栏目: 网页知识    更新: 2019-05-29    浏览:
可能你看到过现在很多网站的网页有使用圆角的边框。

这个放在以前,是需要做出圆角边框的图片,然后再用css一个角一个角的拼凑,但现在不用了,先进的CSS3已经完美支持圆角边框,同时现在大多数浏览器都开始支持CSS3,虽然有些古老的IE还不支持。

具体怎么做呢,只需要一条css代码即可:border-radius:3px 4px 5px 6px; 

代码的含义是让有边框的元素四个直角变成有幅度的圆角,四个角的顺序是从左上角开始,顺时针对应四个角,上面的例子就是左上角是3px、右上角是4px、右下角是5px、左下角是6px

下面破奇网写个简单的例子:

<style>.yuanjiao{border:1px solid blue;border-radius:3px 4px 5px 6px; }</style>
<div class="yuanjiao">这个框会变成圆角</div>

把上面两个代码放到已有的hteml页面中就可以看到效果了。
 

附件下载 [ 下载次数:999 ]

    收藏、推荐