点击排行榜更多>>

css制作圆形/圆角模块:border-radius
浏览: 发布日期:2020-08-20
       最近在帮一个客户整改网站,这是一个非常破旧的网站;本人原先想让客户直接把换掉算了。但是客户貌似对这个网站有感情了,只是让我帮忙把这个网站改的好看一点就好,最头痛的问题是要根据他的过分要求,害我在一个问题上卡了好一会,就是下面讲的css制作圆形/圆角模块。

       css制作圆形/圆角模块:border-radius,这是在css3里面才有的东西。本人一直认为,css3在各大浏览器上面展示的兼容性还不是特别的好,所以个人接触的不是特别的多。但是今天无意间用了一下感觉还行。


制作网页

       我们在做某个页面的时候通常为了达到某种效果,想把某个模块做成圆形,或者是圆角行就需要用到这个东西了。其实它就是在原来方形的里面圈了一个圆角的模块。border-radius属性中只指定一个值,那么将生成4个相同的圆角,也可以指定四个不一样的值。下面是一个简单例子(上图就是其中的效果):

<style> 
#rcorners {
    border-radius: 50%;
    border: 2px solid #8AC007;
    padding: 20px; 
    width: 200px;
    height: 200px;    
}
#rcorners:hover{
   border: 2px solid #f33333;
}
</style>
<div id="rcorners">第一个</div>

       这就是以一个圆环了,一般只要不低于IE9都能用,如果是IE8级以下的浏览器基本上试不起作用的。像其它市面上的浏览器基本上都是没有问题的。css3貌似还有很多有趣的东西,今天就跟大家分享这个css制作圆形/圆角模块:border-radius。