本节简介:讲解CSS3新增的圆角、阴影及不透明度等参数设置
本节课同学们做的笔记 点击播放按钮可自动定位到对应时间进行播放
opacity:所有元素透明度的意思,取值在0到1,
color:rgba(255,255,0,0.5)a代表alpha通道,表示透明度,取值在0——1之间,0.5代表半透明
box-shadow:添加阴影。第一个值往后代表的意思:X轴,Y轴,模糊值,阴影颜色,加 inset代表内阴影
border-radius:一个字代表四个角,两个值代表上下 和左右, 三个字 代表 上 左右 下,四个值顺时针选
opactiy,也是透明度,但会使元素全部变透明是,但RGB里的a值变化,是背景色变透明,上面的文字不会变。
RGB三原色和透明度,(255,200,1,0.5),最后一个值为透明度(0~1)。
box-shadow:有六个参数,x,y轴偏移,阴影模糊,阴影扩展,阴影颜色,阴影类型
border-radius,两个值的时候,是代表左上角和右下角,右上角和左下角。四个值时,是顺时针的方向。
CSS3新增部分最常用的:圆角,阴影,颜色。但版本低的浏览器不支持。
rgba:背景色加透明色,A 表示alpha:0-1
第一值:X值,第二个Y值,第三个模糊值,第四个扩展值,第五个阴影颜色,第六个类型:inset;外阴影不用写。内阴影写上inset就可以了
box-shadow:有六个参数,x,y轴偏移,阴影模糊,阴影扩展,阴影颜色,阴影类型
怎么做圆角:border-radius:100px
只让背景变透明rgba(255,0,0) 让背景和内容整体透明opacity:0.5