颜色模式
rgba(0,0,0,0.5) a代表alpha半透明通道
但凡是用到颜色的地方,都可以使用rgba颜色模式。 包括文字颜色,背景色,边框色。
opacity:0.1; 这个和rgba的差别在它会把内容的透明度改变
圆角
border-radius 圆角的半径
它可以设置多个值。多个值的用法和margin类似。
box-shadow: 水平偏移 垂直偏移 羽化 投影大小 颜色 inset(内投影)
内投影是可选的,注意没有outset。
盒子投影可设置多组值,用逗号隔开。
盒子投影
box-shadow: 水平偏移 垂直偏移 羽化 投影大小 颜色 inset(内投影)
内投影是可选的,注意没有outset。
PS : 盒子投影可设置多组值,用逗号隔开。
文字投影
text-shadow: 水平偏移 垂直偏移 羽化 颜色
比盒子投影少了投影大小和内投影,其他用法跟盒子投影一样。
盒子投影和边框如果没设置颜色,默认会和文字的颜色相同(currentColor)。
背景图固定
background-attachment: fixed;
scroll: 随着页面的滚动轴背景图片将移动
fixed: 随着页面的滚动轴背景图片不会移动
效果:盒子滚动,但背景图是不动的,类似盒子固定定位。
背景图尺寸
background-size
取值:
固定值(px): 100px 200px;
百分比(%): 50% ; 百分比是基于当前盒子的宽和度
特殊值:(出现特殊值的都不会变形)
auto 自动,正比例缩放。
cover 把图片填满整个盒子 (较常用)
contain 把图片完整显示,但是可能出现留白
background:url("../images/dd.png") no-repeat left/contain;后面的/contain等同于background-size:contain;
可以通过 这个 来给背景图进行padding设置 例如 盒子宽高 给80px background-size: 70px 70px; 这样就可以形成10px的padding
模糊背景
filter: blur(3px); 和opacity类似会把内容给模糊掉