视觉设计(4)

渐层背景

• 背景(background)除了可以用图片、单色填满之外，也可以设定为渐层。其属性值为linear-gradient(渐变方向, 颜色1, 颜色2, 颜色3, ...);，渐变方向的单位为角度。

范例

<!-- HTML -->
<div></div>
<!-- CSS -->
div {
  width: 400px;
  height: 400px;
  background: linear-gradient(90deg, red, yellow, green, blue, red);
  margin: auto;
}

显示效果如下

变形效果

• transform属性可以对元素做出不同的变形效果，其常用属性值如下:
  • translate(水平距离, 垂直距离): 可以使元素平移，相对於元素原本的位置，水平距离为正值时向右偏移，负值向左；垂直距离为正值时向下偏移，负值向上。
  • scale(水平宽度, 垂直长度): 可以个别设定元素长宽的缩放倍率，负值会使元素翻转。
  • rotate(旋转角度): 可以设定角度或数字+turn，正负值皆可。
  • skew()