当前位置:首页 > 个人杂谈 > 正文内容

CSS3 DIV设置圆角属性

作者: 葛屹肃 | 日期: 2021-04-02 | 分类: 个人杂谈

最近,看到同事前端的界面,DIV可以设置上面为圆角,下面为方框,我问了一下,方法很简单,只需要设置一下CSS的样式即可。

这个设置对于网站刚好适用,现在网站的顶部是的DIV是方框,而底部是使用图片方式设置为圆角。如果将顶部的DIV也设置为圆角的话,那么,整体看起来就显得更加对称了。

CSS3 DIV圆角设置方式:

border-radius:10px 10px 0 0;

在对应的DIV中CSS中加入border-radius的属性,后面的参数分别对应左上角、右上角,右下角及左下角。

按以上方式设置后,就能让对应的DIV的左上角与右上角为圆角,左下角与右下角为方框。

修改看看效果有个小插曲,当我修改了CSS后,上传至服务器,刷新网页后没有看出效果,当时还以为是CSS的版本的不兼容border-radius这个属性。后来在公司电脑打开网站时,发现修改的DIV圆角可以看到效果了。原来是因为浏览器有缓存,所以,刷新不能马上看出效果。

此次修改又将网站的美化又增添上一笔,至少是美化还是丑化就见仁见智了,至少自我感觉看得更加协调了。

版权声明:本文由〖葛屹肃〗发布,转载请注明出处!
文章链接:https://www.geyisu.com/1869.html

  • 评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?

◎欢迎大家参与讨论