本节简介:讲解CSS3新增的圆角、阴影及不透明度等参数设置
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
opacity(透明度从0到1):1 都变透明 a只是背景变透明
颜色 background:rgba(a表示透明度,从0~1)(0,255,240,0.5(半透明))
box-shadow阴影 x轴 y轴 模糊值 大小 颜色 inset(内阴影)
border-radius圆角 50%是圆 值表示方法跟margin padding是一样的
background:rgba(0~255,0~255,0~255,0~1(alpha值))
box-shadow: x偏移 y偏移 模糊半径 扩展半径 阴影颜色 阴影类型(inset)
rgba:背景变透明,opacity:包含子集内容的所有变透明
border-radius圆角:四个角按顺时针依次是上右下左
background:rgb(255,0,0); opacity:0.5; opacity标签 文字一起变透明
颜色 三原色配合透明度 形如: color:rgba(255,255,0,0.5) a表示的alpha,表示透明度,取值范围是0-1,如果是0.5代表半透明。
box-shadow 在网页中添加阴影 参数有六个: x轴偏移 y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 阴影类型 例:box-shadow:10px 10px 5px 5px red inset
border-radius 顺时针方向1个值代表四个角 2个值——上下 左右 3个值——上 左右 下 4个值——上 右 下 左
border-radius 设置大一点数值 盒子变圆形
圆角 border 阴影box-shadow 颜色 a代表alpha,表示透明度,取值范围是0-1,如果是0.5代表是半透明
透明度opacity可以 同时控制调节文字以及背景 的透明度
颜色透明度 ·三原色配合透明度 形如:color:rgba(255,255, 0,0.5) ·a代表的alpha,表示透明度,取值范围是0-1,如果是0.5代表半透明(可以调节背景颜色透明度 或单纯形状的透明度)
pacity:所有元素透明度的意思,取值在0到1,~color:rgba(255,255,0,0.5)a代表alpha通道,表示透明度,取值在0——1之间,0.5代表半透明
border-radius圆角 一个值是4个角 两个是 上下 左右 三个是 上 左右 下 四个 上右下左顺时针 box-shadow 阴影 有6个参数 x轴偏移 y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 阴影类型
阴影box-shadow 有六个参数:X轴偏移 Y轴偏移 阴影模糊半径 阴影扩展半径 阴影颜色 阴影类型。例如:box-shadow:10px 10 px 5px red inset(内阴影);
ff00cc可以简写为f0c coler:rgba backgroud:rgba(0,255,240,0代表纯色 要是0.5半透明)文字不会变透明 rgb(255,0,0) opacity:0.5可以把文字和背景变透明