首页 > 代码库 > CSS3的基础用法
CSS3的基础用法
CSS3的现状：1、浏览器支持程度差，需要添加私有前缀 2、移动端支持优于PC端 3、不断改进中 4、应用相对广泛
在CSS3中增加新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
一.属性选择器：
ele[attr] 元素包含该attr属性就可以捕获到 （[]前面的ele可以不写，如果不写的话按通配*[attr]）
ele[attr=value] 元素包含该attr属性，且该attr的value有且只有一个并且完全相等的时候可以捕获。
ele[attr~=value] 元素包含该attr属性，并且该attr的值可以以空格分隔，只要其中一个属性全等与value就可以捕获
ele[attr^=value] 元素包含该attr属性，并且该attr的值中以value开头就可以（开头如果有空格的话空格也会占位）
ele[attr$=value] 元素包含该attr属性，并且该attr的值中以value结尾就可以（结尾如果有空格的话空格也会占位）
ele[attr*=value] 元素包含该attr属性，并且该attr的值中包含value就可以（中间如果有空格的话空格也会占位）
ele[attr|=value] 元素包含该attr属性，并且该attr的值中以value开头或者以value-开头都可以捕获到
二.伪类选择器：
除了以前的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器
所有的伪类：前面的ele也可以不写，不写的话按照通配
ele:first-child 该ele元素的兄弟级元素中的第一个
ele:first-of-type 该ele元素的兄弟元素中同类型的第一个
ele:last-child 该ele元素的兄弟级元素中的最后一个
ele:last-of-type 该ele元素的兄弟元素中同类型的最后一个
ele:nth-child(xn+y) 该ele元素的兄弟级元素中的第xn+y个
n的取值范围是0到正无穷 0 1 2 3 4 5 6 ...
元素的索引是从1开始的 1 2 3 4 5 6 ...
x可以是负值
ele:nth-of-type(xn+y) 该ele元素的兄弟级元素中同类型的第xn+y个
n的取值范围是0到正无穷 0 1 2 3 4 5 6 ...
元素的索引是从1开始的 1 2 3 4 5 6 ...
x可以是负值
ele:nth-last-child(xn+y) 该ele元素的兄弟级元素中的倒数第xn+y个
ele:nth-last-of-type(xn+y) 该ele元素的兄弟级元素中同类型的倒数第xn+y个
ele:empty 该元素下没有任何元素（可以有注释，空格是站位的）
ele:checked 单选框和复选框在选中状态下会被捕获
ele:disabled 禁用状态下的按钮
ele:enabled 不禁用状态下的按钮
三.目标伪类：
ele:target 结合锚点进行使用，处于当前锚点的元素会被选中；
四.伪元素选择器：
ele::first-letter 文本的第一个单词或字
ele::first-line 文本第一行
ele::selection 被选中区块的样式(只能添加背景颜色，字体颜色，字体阴影)
ele::placeholder 占位符样式
重点: ele::before、ele::after 是一个行内元素，需要转换成块元素 必须设置 content属性.
ele:after、ele:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下ele:after、ele:before会被自动识别为ele::after、
ele::before，这样做的目的是用来做兼容处理。
":" 与 "::" 区别在于区分伪类和伪元素.
五.颜色 ：
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
rgba() r,g,b的取值范围在0-255 a表示透明度取值范围在0-1.
hsla() H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色 h: 0-255 s:0-100% l:0-100%;
opacity 设置的透明度会被子级盒子继承.
rgba 或者 hsla 设置的透明度不会被继承.
transparent 不能进行调整，要不就全透明，要不就全不透明.
六.文字阴影:
text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。阴影的大小默认跟文字一样大.
如果要设置多个 直接使用 逗号分隔 继续往后写即可.
1、水平偏移量 X轴 正值向右 负值向左；
2、垂直偏移量 Y轴 正值向下 负值向上；
3、模糊度是不能为负值；
可设置四个参数：第一个参数 X方向的移动 正值是X轴正方向
第二个参数 Y方向的移动 正值是Y轴正方向
第三个参数 阴影模糊度 数值不能为负值 越大越模糊
第四个参数 阴影的颜色
四个参数为一套，一套可以出一个阴影，用“，”分割可以出多套阴影
七.边框圆角:
border-radius. 以0px位例子. border-radius:0px 0px 0px 0px.可设置4个参数 分别表示左上、右上、左下、右下.
border-radius:0px 0px 0px.可设置3个参数 分别表示左上、右上、左下右下
border-radius:0px 0px.可设置2个参数 分别表示左上右上、左下右下.
border-radius:0px 可设置1个参数 表示左上右上左下右下
八.盒子阴影 box-shadow:
box-shadow 盒子阴影
第零个参数 inset 向内扩散的意思（选填）
第一个参数 X方向的移动 正值是X轴正方向
第二个参数 Y方向的移动 正值是Y轴正方向
第三个参数 阴影模糊度 数值不能为负值 越大越模糊
第四个参数 阴影的扩散 数值不能为负值
第五个参数 阴影的颜色
一套可以出一个阴影，用“，”分割可以出多套阴影,可以设置多重边框阴影，实现更好的效果，增强立体感. 所有的阴影都只是视觉上的效果，不会影响文档流的站位 不会改变盒子大小.
九.盒模型 box-sizing：
兼容性比较好
box-sizing 如果不设置 默认的值 就是 content-box: 优先保证内容的大小 对盒子进行缩放;
border-box: 让 盒子 优先保证自己所占区域的大小,对内容进行压缩;
盒子的计算是 内容+padding+border
box-sizing: content-box; width和height代表的是内容的宽高
box-sizing: border-box; width和height代表的是盒子的宽高
如果在实际开发中 需要保证 元素所占的 区域大小 优先级要高于 内容的大小 可以选用该属性
十.背景图片属性:
1、background-size设置背景图片的尺寸：包含两个属性 cover contain. 也可以使用长度单位或者百分比设置
cover会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。
contain会自动调整缩放比例，保证图片始终完整显示在背景区域。
可以设置多张背景图片:例 用","号隔开即可
background-image: url(‘images/xxx.jpg‘),url(‘images/xxx.png‘)
设置多张图片的位置用","号隔开即可 也可以用长度单位
background-position: top left,bottom right;
复合属性中设置图片大小 注意需要用"/"号分隔
url(‘images/dog.gif‘) no-repeat 115px 70px / 200px 200px
2、background-origin设置背景定位的原点 包含三个属性
border-box以边框做为参考原点；
padding-box以内边距做为参考原点；
content-box以内容区做为参考点；
3、background-clip设置背景区域裁切 包含三个属性
border-box裁切边框以内为背景区域；
padding-box裁切内边距以内为背景区域；
content-box裁切内容区做为背景区域；
CSS3的基础用法