徐枭雄课件CSS3常用属性.docVIP

CSS3中需要了解的常用属性 浏览器私有前缀 IE -ms- Opera -O- Firefox -moz- Chrome -webkit- Safari -webkit- 颜色制式 Rgba模式：在RGB模式的基础上，允许设置当前颜色的透明度(a) 透明度的取值在0-1之间的小数 HSL模式（该方法可以表示自然界绝大部分颜色） H 色相的缩放 0-360度 一圈的颜色 S 饱和度的缩写 0%-100% 颜色的密度 L 亮度 从黑到白 0% -100% HSLA模式 在HSL基础上，允许设置当前的透明度 格式：HSLA（色相，饱和度，亮度，透明度）； Opacity属性 可以对任何元素进行透明度设置 取值范围：0~1的小数 Text-shadow:专门给文字加阴影的 注：该属性仅用于设置文本的阴影，不能用于设置元素的阴影 格式：text-shadow:阴影，阴影，……； 阴影的格式：水平偏移 垂直偏移 [模糊度] 颜色值 作业：预习 圆角边框 盒子阴影 多背景 课堂代码3遍。 练习题一套 商城页面：3个礼拜以后交 首页，产品页，产品详情页，登录页，注册页面，购物车，订单页，个人中心，订单详情页。 圆角边框 border-radius 作用：用于设置元素的圆角边框 完整格式： Border-radius:记录参数 1左上角水平半径 右上角水平半径 右下角水平半径 左下角水平半径 / 左上角垂直半径 右上角垂直半径 右下角垂直半径 左下角垂直半径 格式2：一个参数4个值 左上角水平和垂直半径 右上角水平和垂直半径 右下角水平和垂直半径 左下角水平和垂直半径 格式3：一个参数2个值 左上角和右下角水平和垂直半径 右上角和左下角的水平和垂直半径 格式:4：一个参数一个值 4个角的水平和垂直半径 Border-radius:10/20px 10px 水平方向四个角都为10px 垂直方向 左上和右下为20 垂直方向 右上和左下为10 解释：关于圆角的形成： 从指定角的顶端，向内部引出垂直半径和水平半径， 将水平半径和垂直半径相交于元素内部的一个点（圆心点） 以该点为圆心，指定的垂直半径和水平半径画圆或椭圆 与边框相交的部分就是圆角部分。 画图： 盒子阴影 格式： Box-shadow:阴影1，阴影2……； 阴影的格式： 水平偏移位置 垂直偏移位置 模糊度 外延值 阴影颜色 内置阴影 inset 多背景： Background-origin 设置背景定位参考点 Border-box: 从边框开始绘制背景 Padding-box 从内补白开始绘制背景 Content-box 从内容开始绘制背景