详细讲解CSS实现DIV圆角的几种方式-[蓝顿长沙网络公司,专业网站设计制作,网站优化推广经验-]

欢迎光临长沙蓝顿网络公司，服务热线：0731-85287087

详细讲解CSS实现DIV圆角的几种方式

出处：本站原创发布时间：2020-4-14 14:23:21 阅读：1079

以前，小伙伴们要处理一个圆形的时候，大都是先做一个圆形的背景图片来进行处理，或者用js脚本来进行处理，而现在，用DIV圆角样式来处理就简单方便很多了。

样式代码：

此代码表示的是宽、高都为100px的正圆形，border-radius:50px表示弧度为50px，此处表示的是四个角都是弧50px，效果如下：

但是有没有四个角出现不同弧度的写法呢？有的，代码可以这样改写：

1、<div style="border-radius:50px 0; width:100px; height:100px; border:1px #ccc solid">

这种方式采用的是对称式写法，即左上和右下角弧度是50px，另外两个角的弧度是0，其效果图如下：

2、<div style="border-radius:50px 10px 50px 10px; width:100px; height:100px; border:1px #ccc solid">

这种方式采用的是分别对四个角进行逐一定义弧度的写法，方向分别是上、右、下、左的顺序，效果图如下：

除了DIV，其实表格也是可以采用这种方式进行处理的，大家可以举一反三的测试一下，会有意想不到的效果的。

当前内容为本站原创，欢迎转载交流，转载请注明出处（蓝顿网络：https://www.web0731.com）！