CSS3之颜色模式、文本阴影、盒子模型、私有化前缀
2018-06-11 15:00
169 查看
颜色模式
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- 欧朋浏览器
相关文章推荐
- 从零开始学 Web 之 CSS3(二)颜色模式,文字阴影,盒模型,边框圆角,边框阴影
- css3盒子模型内减模式和外加模式
- HTML5+CSS3-第二节(浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角)
- HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)
- CSS3-盒子模型box-sizing
- IEBlog:IE10下CSS3的文本阴影(CSS3 text-shadow)
- css3盒子模型及其定位
- CSS3 应用01 - 文本阴影效果(兼容IE 7-9 Firefox Opera Chrome 等多浏览器)
- css3之颜色和阴影
- CSS3系列教程:简介;圆角、边框半径和圆角;边框颜色;阴影
- 7css3的前缀及盒模型
- 【Web前端学习笔记】CSS3_常用属性,选择器,盒子模型
- CSS3之文本凹凸效果(阴影效果)
- 10-3。CSS3-圆角、线性渐变、盒子阴影
- CSS3---文本阴影text-shadow
- css3实现渐变、阴影、超出指定文本省略号显示等一些效果
- css3之文本,字体,颜色
- CSS3 box-sizing属性指定盒子模型
- 用css3做出好看的盒子阴影
- CSS3常用的几种颜色渐变模式总结