CSS实现div圆角

最近试验了一个小功能就是CSS实现div的圆角

DIV圆角很多网站是使用圆角的图片实现的。而我不喜欢在网页中使用图片，所以研究了一下用CSS通过块的长度变化和背景色来实现圆角的功能。总的来说不复杂，但是写的CSS代码却比较多。据说HTML5里面有专门的属性能够完成这样的功能，但是毕竟HTML5还没有彻底成为标准。

一、放大效果图

这里面一共有10个div容器，为了突出效果，我把最上面和最下面两个块的背景色调了一下。

二、代码结构

代码结构是这样的

<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="content">正文</div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
</div>

div1~div4实现上面的圆角，div5~div6实现下面的圆角。

然后就可以编辑CSS代码了。

三、CSS原理

只要控制各个div的高度和左右也边距以及背景色和边框颜色就能实现圆角功能了。下图是效果图

CSS代码我就不贴出来了，我也是初学的水货。如果读者有更好是设计，我们可以讨论。如果想跟我探讨这个问题也可以给我留言。

CSS实现div圆角相关推荐

个人认为最完美的css处理div圆角的方法
本着依简单易用,易维护为原则!改进了原有的css圆角代码! 可以生成,圆角矩形和圆角边框! 具体使用方法!见代码! 圆角边框只要把div的class定义成roundeside 圆角矩形只要把div的c ...
html div阴影四周均匀css写法 html div 圆角幅度写法
html div阴影四周均匀css写法 html div 圆角幅度写法 border-radius: 10px
不用图片的DIV圆角（兼容各浏览器）
分享一个大家在工作中很实用的一个不用图片就能实现的DIV圆角.希望对大家开发有用: 直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <st ...
CSS自适应宽度圆角按钮
CSS自适应宽度圆角按钮,背景图要使用满足最长按钮的宽度,然后通过两个标签a, span,一个通过背景图的左对齐,一个通过背景图的右对齐. <!DOCTYPE html PUBLIC " ...
纯CSS实现漂亮圆角阴影边框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
html编写气泡对话框,HTML+CSS入门纯CSS手写圆角气泡对话框
本篇教程介绍了HTML+CSS入门纯CSS手写圆角气泡对话框,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 嗯--我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那 ...
css样式实现圆角矩形
一.CSS样式实现圆角矩形,增加背景颜色,以及边框颜色 .css1{background: #86c7ff; width: 100%; font-size: 18px; color: #5f84a8 ...
纯CSS样式实现圆角边框
圆角应用的比较广泛,比如说一些说明的div,或者模块的div,圆角的button等. 公司的页面一般是用图片实现的,坑爹的是这次的图片整个边框的上面或整个都是一个图片,我现在要调整大小受到图片的限制了 ...
js简单实现div圆角
原文 [url]http://www.w3pop.com/comm/view/id/311/[/url] 这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它 ...
html怎么设置凹陷效果,如何在css中实现圆角内凹效果
如何在css中实现圆角内凹效果发布时间:2020-07-22 09:22:57 来源:亿速云阅读:122 作者:Leah 这期内容当中小编将会给大家带来有关如何在css中实现圆角内凹效果,文章内容 ...

CSS实现div圆角

CSS实现div圆角相关推荐

最新文章

热门文章