欢迎光临长沙蓝顿网络公司,服务热线:0731-85287087
长沙网站建设
详细讲解CSS实现DIV圆角的几种方式
营销型网站建设
出处:本站原创     发布时间:2020-4-14 14:23:21    阅读:300

以前,小伙伴们要处理一个圆形的时候,大都是先做一个圆形的背景图片来进行处理,或者用js脚本来进行处理,而现在,用DIV圆角样式来处理就简单方便很多了。
样式代码:
<div style="border-radius:50px; width:100px; height:100px; border:1px #ccc solid">
此代码表示的是宽、高都为100px的正圆形,border-radius:50px表示弧度为50px,此处表示的是四个角都是弧50px,效果如下:
div圆角的css样式写法详解
但是有没有四个角出现不同弧度的写法呢?有的,代码可以这样改写:
1、<div style="border-radius:50px 0; width:100px; height:100px; border:1px #ccc solid">
这种方式采用的是对称式写法,即左上和右下角弧度是50px,另外两个角的弧度是0,其效果图如下:
div圆角的css样式写法详解
2、<div style="border-radius:50px 10px 50px 10px; width:100px; height:100px; border:1px #ccc solid">
这种方式采用的是分别对四个角进行逐一定义弧度的写法,方向分别是上、右、下、左的顺序,效果图如下:
div圆角的css样式写法详解
除了DIV,其实表格也是可以采用这种方式进行处理的,大家可以举一反三的测试一下,会有意想不到的效果的。

当前内容为本站原创,欢迎转载交流,转载请注明出处(蓝顿网络:https://www.web0731.com)!
上一条:湖南五金阀门公司网站建设完成
下一条:智能模板网站和手工定制网站的区别,企业该如何选?
长沙网络公司,长沙网站优化
© 2009-2020 长沙市蓝顿品牌设计有限公司 湘ICP备16016586号
地址:湖南长沙雨花区万家丽路泰禹家园1-409 工作QQ:565616163
本站关键词:长沙网站建设 长沙网站制作 长沙做网站的公司 长沙网络公司