专业网站建设、网站设计、网站制作、SEO、网站推广的综合型网络科技公司,助推企业更好的发展。

183 9055 0806

咨询热线:

最新上传的网站模板
  • 工商管理注册认证类织梦网站模板

    工商管理注册认证类织梦网站模板

  • 瑜伽美容健身企业官网织梦模板(

    瑜伽美容健身企业官网织梦模板(

  • 响应式影视传媒展览类网站模板(自

    响应式影视传媒展览类网站模板(自

  • 五金类农业机械型网站模板(带手

    五金类农业机械型网站模板(带手

  • 绿色农业水果白菜蔬菜类织梦模板

    绿色农业水果白菜蔬菜类织梦模板

  • 汽车租赁服务类网站织梦模板(带手

    汽车租赁服务类网站织梦模板(带手

  • css制作圆形/圆角模块:border-radius

    作者:网站扛把子 发表时间:2017-12-04 15:54 来源:未知
           最近在帮一个客户整改网站,这是一个非常破旧的网站;本人原先想让客户直接把换掉算了。但是客户貌似对这个网站有感情了,只是让我帮忙把这个网站改的好看一点就好,最头痛的问题是要根据他的过分要求,害我在一个问题上卡了好一会,就是下面讲的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。

    本文来自活鱼网络,转载使用请注明来源:http://www.huoyu168.com/tech/18.html 

    上一篇:没有了

    下一篇:做网站千万不要把简单的东西复杂化

    网站首页 -解决方案 -客户案例 -建站方案 -推广咨询 -常见问题 -技术咨询 -联系我们
    热线咨询:
    18390550806
    网站备案号:湘ICP备17020595号
    微信咨询