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
文章链接:https://www.geyisu.com/1869.html