1、border-radius 知识点：
1.1、简单语法：
border-radius：length/persentage；
js语法：
object.style.borderRadius="5px"
border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。4个角（顺时针方向，左上，右上，右下，左下），每个角都有两个半径，水平半径和垂直半径，
如下图所示demo，就是每个圆角的水平、垂直半径都一样。数值越大，圆角弧度就越大
<html> <head> <meta charset="utf-8"/> <title>内凹圆角</title> <style type="text/css"> div{ margin: 50px; } .test1{ border-radius:20px; width: 100px; height: 100px; background: pink } .test2{ border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px; width: 100px; height: 100px; background: pink } .test3{ border-top-left-radius:10px; border-top-right-radius:30px; border-bottom-right-radius:40px; border-bottom-left-radius:50px; width: 100px; height: 100px; background: pink } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> <div class="test3"></div> </body> </html>
这2种写法是一样的，test1是test2的缩写，test3是不同的弧度演示
1.2、每个圆角都设置2组值，既水平半径和垂直半径不相同
语法：
border-radius:50px/10px;这样是一次性设置4个圆角都是一样的
依然沿用上面的html，
.test4{ border-radius:50px/10px; width: 100px; height: 100px; background: pink } .test5{ border-radius:10px/50px; width: 100px; height: 100px; background: pink } .test6{ border-radius:30px/50px; width: 100px; height: 100px; background: pink }
也可以针对每个圆角单独设置，比如画一个鸡蛋
.test7{ width: 100px; height: 120px; background: pink; border-radius:60px 60px 60px 60px/100px 100px 60px 60px; }
2、css内凹圆角
工作中经常用用到，显示圆角的按钮图片这种是比较简单也常见的效果。如果要实现内凹的圆角形状还是比较复杂的，例如这种
大概实现思路如下：
- 一个外层div，设置宽高，设置相对定位。
- 4个小的div，在外层div里面，通过border-radius进行不同方法的圆角设置
- 为这些小块加上不同方位的边框，通过对象定位，分别定位到外层div的
代码如下：
<html> <head> <meta charset="utf-8"/> <title>内凹圆角</title> <style type="text/css"> .wrap { width: 200px; height: 200px; border: 1px solid red; position: relative; margin-top: 100px; margin-left: 100px; } .wrap_left_top, .wrap_right_top, .wrap_left_bottom, .wrap_right_bottom { position: absolute; width: 40px; height: 40px; border: 1px solid #fff; z-index: 1; background: pink; } .wrap_left_top { top: -1px; left: -1px; border-radius: 0 0 40px 0; border-bottom: 1px solid red; border-right: 1px solid red; } .wrap_right_top { top: -1px; right: -1px; border-radius: 0 0 0 40px; border-bottom: 1px solid red; border-left: 1px solid red; } .wrap_left_bottom { left: -1px; bottom: -1px; border-radius: 0 40px 0 0; border-top: 1px solid red; border-right: 1px solid red; } .wrap_right_bottom { right: -1px; bottom: -1px; border-radius: 40px 0 0 0; border-top: 1px solid red; border-left: 1px solid red; } </style> </head> <body> <div class="wrap"> <div class="wrap_left_top"></div> <div class="wrap_right_top"></div> <div class="wrap_left_bottom"></div> <div class="wrap_right_bottom"></div> </div> </body> </html>
最后，把4个小块的背景色去掉。就完成了
3、其他常用形状
/*圆圈*/ .other1{ width: 100px; height: 100px; background: pink; border-radius: 50%; } /*半圆*/ .other2{ width:50px; height: 100px; background: pink; border-radius: 50px 0 0 50px; } /*扇形*/ .other3{ width: 100px; height: 100px; background: pink; border-radius: 100% 0 0 0; } /*花瓣 旋转一下也可以是水滴*/ .other4{ width: 100px; height: 100px; background: pink; border-radius: 50% 50% 0 50%; } /*花瓣 旋转一下也可以是水滴*/ .other5{ width: 100px; height: 100px; background: pink; border-radius: 50% 50% 0 50%; transform:rotate(45deg); }
