CSS3之颜色模式、文本阴影、盒子模型、私有化前缀

颜色模式

CSS3中的两种颜色模式
  • RGBA
    R:red (0~255)
    G:green (0~255)
    B:blue (0~255)
    A:alpha透明度 (0~1)
  • HSLA
    H:色调 (0~360) 不同的颜色拥有不同的色调
    S:饱和度 (0%~100%) 值越大,颜色越鲜艳
    L:亮度 (0%~100%) 值越大,越接近白色
    A:alpha透明度 (0~1)

文本阴影

text-shadow:param1 param2 praram3 param4
param1:水平偏移距离,正值向右
param2:垂直偏移距离,正值向下
param3:模糊程度,用”px”为单位,值越大越模糊
param4:颜色

一个文本可以拥有多个文本阴影,用逗号隔开


盒子模型

CSS2中的盒子模型的特点
  • 盒子宽度:padding+border+width
  • 内容区域大小不变
  • 整体大小改变
CSS3中的盒子模型
  • content-box:内容盒子 相当于传统盒子
  • padding-box:内边距盒子
  • border-box:外边距盒子

box-sizing:content-box/padding-box/border-box

如果已经设置好一个盒子的宽度width

  • box-sizing设置为content-box,添加border或者padding,
    盒子宽度=width+padding+border
  • box-sizing设置为border-box 添加border或者padding,
    盒子宽度=width
  • box-sizing设置为padding-box 添加border或者padding,
    盒子宽度=width+border

私有化前缀

-webkit- 谷歌
-ms- IE浏览器
-moz- 火狐浏览器
-o- 欧朋浏览器

posted @ 2018-06-11 15:00  一起学编程  阅读(107)  评论(0编辑  收藏  举报