角的设计风格越来越流行，这也要求了前端开发人员，必须要掌握圆角属性。

Css提供了一个圆角属性，可以很方便实现圆角，而且还可以任意设置圆角的度数，以达到设置任意弧度的圆角，甚至让本元素变成圆球；如果还能灵活运用，什么样的形状都能做出来。这个圆角属性学问不少。

语法

border-radius：数值；

数值常用px作为单位，值越大，那么圆角就越圆。

这个数值有三种设置方法

（1）仅设置一个值

应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度。

（2）设置四个方向的值

这里要注意四个数值的书写顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺序

（3）对称值

采用对角线相等的原则,左上角和右下角，右上角和左下角是一对。

案例

现在基本上设计稿都是圆角类型，有些矩形的角是圆角，有些矩形是半圆型，有些干脆是整个都是圆。其实都是稍微改变一下圆角弧度。

以下做个参考，基本实际开发都是这些。

当然还有很多奇形怪状，也都是仅仅改变每个角的圆角弧度。

知识导图

、CSS阴影（box-shadow）

1.盒子阴影

语法
box-shadow:h-shadow v-shadow blur spread color inset;

• 默认为外阴影(outset)，但是不可以写这个单词，否则无效
• 盒子阴影不占用空间，不会影响其他盒子排列
• 鼠标经过div为div:hover {box-shadow: 10px 10px;}

2.文字阴影（text-shadow）

语法
text-shadow：h-shadow v-shadow blur color；

三、圆角边框（border-radius）

语法
border-radius：length;

• 半径原理：圆与边框的交集形成圆角效果
• 参数值可以为数值或百分比形式
• 若为正方形，想设置为圆，把数值改为高/宽的一半，或直接写为50%
• 若为矩形，设为高的一半即可
• 该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角，右下角，左下角
• 分开写：border-top-left-radius | border-top-right-radius
  border-bottom-left-radius | border-bottom-right-radius

、Background-size 背景尺寸

说明：background-size 规定背景图像的尺寸 属性值

length (10px) 规定背景图的大小。第一个值宽度，第二个值高度。（直接定义背景图的大小） Percentage(%) 以百分比为值设置背景图大小（参照元素的大小） cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 contain 把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域。

复合式写法：background: url(img/laoli.jpg) no-repeat 0 0/cover;说明：backgroun-size和background-position要用 “ / ” 组成一个属性值一起写；

2、background-origin 背景原点（起始点）位置

说明：指定background-origin属性应该是相对位置 属性值 padding-box 背景图像填充框的相对位置 （从padding区开始显示背景图）默认值 border-box 背景图像边界框的相对位置（从边框区开始显示背景图） content-box 背景图像的相对位置的内容框 （从内容区开始显示背景图）

3、background-clip 背景裁切

说明：background-clip 属性规定背景的绘制区域。 属性值 border-box 背景被裁剪到边框盒。 默认值 padding-box 背景被裁剪到内边距框。 content-box 背景被裁剪到内容框。 扩展：text： 背景被裁剪到文字。说明：-webkit-background-clip: text; 使用时要加浏览器前缀

4、添加多张背景图:

语法：background:url(),url();

background:url(img/corner_lt.gif) no-repeat left top, url(img/corner_rt.gif) no-repeat right top, url(img/corner_rb.gif) no-repeat right bottom, url(img/corner_lb.gif) no-repeat left bottom;

background-color:#63ceff;

5、模糊：blur

filter : blur(value) 说明：值越大，越模糊；

6、图片边框属性：

border-image 属性是一个简写属性，用于设置以下属性: border-image-source 用在边框的图片的路径。 border-image-slice 图片边框向内偏移(不加单位)。 border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch) border-image-outset 边框图像区域超出边框的量(值是一个倍数或者具体的数值)

7、CSS圆角属性：

Border-radius：

语法：border-radius: 20px; 代表每个角的X轴的弧度和Y轴的弧度是一样的；

语法：border-radius: 20px/50px; 代表每个角的X轴的弧度是20px,Y轴的弧度是50px；

说明：10px 20px 30px 40px/50px 40px 30px 20px; “/ ”前表示X轴的弧度 ；“/ ”后 表示Y轴的弧度

用法： border-radius: 10px; 四个角的值都是10px; border-radius: 10px 20px; 值1：左上和右下 ；值2 ：右上和左下 border-radius: 10px 20px 30px ; 值1：左上 ；值2 ：右上和左下 ；值3：右下； border-radius: 10px 20px 30px 40px ; 值1：左上 ；值2 ：右上和 ；值3：右下； 值 4：左下

8、css3 calc()（四则运算）

说明：width:calc(100% - 200px); width:calc(100% - 200px);

注：运算符前后必须要留空格； + - * / 加法和减法直接写数值就好； 乘法和除法 要写倍数 不用加单位 ；

9、pointer-events：阻止鼠标事件 、 穿透效果

pointer-events:none;