CSS3的边框、渐变、圆角

这是一篇关于CSS3的边框、渐变、圆角的思维导图

CSS基础

• 边框
  • 应用于块级元素，设置边框时可以四个方向都设置
    • border-top 上边框
    • border-left 左边框
    • border-right 右边框
    • border-bottom 下边框
  • 边框阴影：box-shadow
    • h-shadow
      • 水平阴影的位置（必填）
    • v-shadow
      • 垂直阴影的位置（必填）
    • blur
      • 模糊阴影距离（可选）
    • color
      • 阴影颜色（可选）
    • inset/outset
      • 向内/外散播
    • box-shadow：10px（水平方向） 10px（垂直方向） 50px（模糊距离） color；
      • h-shadow和v-shadow取正值时，阴影方向是向右、向下扩散
      • h-shadow和v-shadow取负值时，阴影方向是向左、向上扩散
• 渐变
  • 线性渐变
    • 沿着一个指定的方向进行渐变，如不设置方向，默认反向是从上到下
      • 标准语法
        • background-image：linear-gradient（颜色，颜色，……）
      • 带方向的语法
        • background-image：linear-gradient（to 方向单词，颜色，……）
        • background-image：linear-gradient（角度值deg，颜色，……）
          • 角度值是正值时从屏幕的左侧开始
          • 角度值是负值时从屏幕的右侧开始
  • 径向渐变
    • 以一个圆心为中心向四周进行渐变
      • 标准语法
        • background-image：-webkit-radial-gradient（颜色，颜色，……）
      • 不均匀语法
        • background-image：-webkit-radial-gradient（颜色 百分比，颜色 百分比，……）
      • 定义形状
        • background-image：-webkiit-radial-gradient（x轴位置 y轴位置，形状单词（circle 圆形、ellipse 椭圆），颜色，……）
          • x轴、y轴的值
            • 代表方向的单词
              • left
              • right
              • top
              • bottom
            • px（像素）
            • 数字 + %
• 圆角：使元素边框更圆润
  • border-radios：设置四个方向
    • 取四个值时
      • 左上角、右上角、右下角、左下角
    • 取三个值时
      • 左上角、右上角和左下角、右下角
    • 取两个值时
      • 左上角和右下角、右上角和左下角
    • 取一个值时
      • 四个角一致
    • 注：取值
      • 数字+ px
      • 数字+ %
      • 数值超过块宽高的50%时，无论加多大都无效
        • 宽高一致显示圆形
        • 宽高不一致显示椭圆
  • border-left-top-radius
    • 左上
  • border-right-top-radius
    • 右上
  • border-right-bottom-radius
    • 右下
  • border-left-bottom-radius
    • 左下
• 背景
  • background-size
    • 设置背景图片大小
      • cover
        • 覆盖
      • contain
        • 适应，当宽或高有一个边达到块的最大值时，图片的大小不再变化
      • percentage
        • 以父元素的百分比来设置宽高，只设置一个值时，第二个值是auto（自动）