模块三 CSS3 的边框属性和渐变 (1).pptx

主讲：周怡燕响应式WEB应用开发（HTML5+CSS3）网页设计

模块三CSS3盒子的边框属性、阴影和渐变CSS3背景设置03CSS3渐变04项目实施05CSS3的边框属性01CSS3盒子阴影02

项目实战

项目实战

CSS3的边框属性和盒子阴影5用CSS3边框属性可以创建圆角边框、图片框，盒子阴影属性可以添加盒子阴影CSS3盒阴影（box-shadow）box-shadowCSS3圆角边框（border-radius）border-radiusCSS3边框图片（border-image）border-image不使用Photoshop不切图

CSS3的边框属性/01

CSS3的边框属性7CSS3圆角边框在很多网页中，常常需要实现圆角边框效果，以前的做法就是切图，现在就方便了。使用CSS3border-radius属性，可以给任何元素制作圆角，甚至可以实现绘制圆、半圆、四分之一的圆等各种圆角图形。border-radius属性实际上是以下属性的简写属性：border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius语法说明

CSS3的边框属性8CSS3圆角边框border-radius:1~4length|%/1~4length|%;语法注释：border-radius是一种缩写写法.如果/前后的值都存在,那么/前面的值为水平半径,后面的值为垂直半径;如果没有/,则水平和垂直的值相等.顺序是按照top-left、top-right、bottom-right、bottom-left来的，数值可以用px、%、em表示。

CSS3的边框属性9CSS3圆角边框只设置一个值，可分为两种情况：不存在/应该是我们最常用的一种情况了，常用来给button加圆角边框，或者画一个圆形按钮，仅需设置一个数值，即可给元素的四个边角设置统一的圆角弧度，top-left、top-right、bottom-right、bottom-left四个值相等,并且水平半径和垂直半径也相同。border-radius:53px;存在/四个top-left、top-right、bottom-right、bottom-left值相等,但是水平半径和垂直半径不相同。border-radius:30px/50px;仅设置一个值

CSS3的边框属性10CSS3圆角边框不存在/与padding和margin一样，border-radius同样可以省略部分值，省略时同样是采用对角线相等的原则。例如：border-radius:50px0px;存在//前面的值都为水平半径,后面的值都为垂直半径border-radius:50px0px/30px0px;仅设置二个值

CSS3的边框属性11CSS3圆角边框如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right。例如：border-radius:50px10px30px;仅设置三个值

CSS3的边框属性12CSS3圆角边框border-radius属性其实是border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性的简写模式，因此，border-radius:30px;，其实等价于border-radius:30px30px30px30px;（注意：与padding和margin一样，各个数字之间用空格隔开）。这里要注意四个数值的书写顺序，不同于padding和margin的“上、右、下、左”的顺序，border-radius采用的是左上角、右上角、右下角、左下角的顺时针方向顺序，如下图所示：仅设置四个值

CSS3的边框属性13CSS3圆角边框带有指定背景颜色的元素的圆角border-radius的应用

CSS3的边框属性14CSS3圆角边框带边框元素的圆角border-radius的应用

CSS3的边框属性15CSS3圆角边框带有背景图像的元素的圆角border-radius的应用

阶段小实训width:120px;height:120px;border-radius:60px;width:60px;height:120px;border-radius:60px0060px;width:60px;height:60px;borde