css3基础

CSS3 私有前缀

  • -webkit- chrome/safari等webkit内核浏览器
  • -moz- firfox
  • -o- opera
  • -ms- IE

CSS3 盒子模型

  • box-sizing 值 content-box / border-box
  • resize 值 none / horizontal / vertical / both
  • outline outline:width style color
  • outline-width
  • outline-color
  • outline-style 值 同border-style solid / dotted / dashed ...
  • outline-offset 外轮廓距离边框的距离
  • display: none|block|inline-block|table|table-row(同tr)|table-cell(同td)|...

CSS3 长度单位

绝对单位

  • em
  • mm
  • pt(点)
  • p
  • pc
  • q(1/4毫米)

相对单位

  • px
  • em 默认字体高度的一半
  • ex 默认字体大小一半
  • rem 相对于根元素字体大小 的倍数
  • vw 相对于视口的宽度,视口均分
  • vh 相对于视口的高度,视口均分
  • vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
  • vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

CSS3 颜色

设置半透明

  • opacity 0~1之间的小数,不透明度,值越大,越不透明

颜色值

  • hex 16进制
  • colorname
  • rgb
  • rgba
  • hsl(h(色调),s(饱和度),l(亮度))
  • hsla
  • transparent

CSS3 渐变

线性渐变

  • linear-gradient(方向, 色标1 色标1位置, 色标2, 色标2位置)
  • linear-gradient(to right, red 10px, purple 100px)
  • 方向: to left /to top /to right/to bottom / angle (0-360deg)

径向渐变

  • radial-gradient(形状 半径 at 圆心, 色标 色标位置, 色标, 色标位置)
  • 形状: ellipse / circle
  • 半径: length, 百分比,closest-corner/closest-side/farthest-side/farthest-corner
  • 位置 left/center/right top/center/bottom, 像素

posted on 2017-08-02 21:42  溢流谦  阅读(104)  评论(0编辑  收藏  举报

导航