本節簡介:講解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可以把文字和背景變透明