CSS3-选择器和过渡

一、选择器和盒模型

1.属性选择器

• E[attr]:查找指定的拥有attr属性的E标签
• E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签，=是严格匹配
• E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
• E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签
• E[attr$=value]:查找拥有指定的attr属性并且属性值以value结束的E标签

2.兄弟选择器

• .first + li{}：查找添加了.first样式的标签的相邻的下一个li元素，必须是指定类型的元素，如果下一个元素不是li则无效
• .first ~ li{}：查找添加了.first样式的元素后面的所有兄弟li元素

3.伪类选择器

• E:first-child:查找E元素的父级元素中的第一个E元素。如果第一个元素不是E，则设置无效
• E:last-child:同上
• E:first-of-type：在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素
• E:last-of-type：同上
• E:nth-of-type(n)：指定索引位置，当n=1时，为第一个元素。n取值范围为0~子元素的长度。但是当n<=0时，选取无效
• E:target：可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式
• p::first-letter：获取第一个字符
• p::first-line：获取第一行内容
• p::selection：设置当前选中内容的样式，它只能设置显示的样式，而不能设置内容大小
• before和after：必须添加content属性，否则后期不可见，默认是行级元素，如果想设置宽高，就必须转换为块级元素

4.字体效果

• css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感
• 用法：text-shadow:offsetX offsetY blur color；
• 前两个属性是偏移值，blur是模糊值（模糊的程度），color是阴影的颜色
• 例：text-shadow: -2px -2px 5px red;
• 多层阴影效果：text-shadow: 0px 0px 30px #fff,0px 0px 50px red,0px 0px 70px #fff;
• 浮雕立体效果：text-shadow: -1px -1px 0px #eee,-2px -2px 0px #ddd,-3px -3px 0px #ccc;

5.盒模型

• 在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上 padding + border + width。
• 设置属性box-sizing：border-box，对象的实际宽度就等于设置的width值

6.边框阴影

• box-shadow:h v blur spread color inset；
• h:水平方向的偏移值
• v:垂直方向的偏移值
• blur:模糊–可选，默认0
• spread:阴影的尺寸，扩展和收缩阴影的大小–可选 默认0
• color:颜色–可选，默认黑色
• inset:内阴影–可选,默认是外阴影

二、渐变和过渡

1.渐变：渐变产生的是图像，所以需要使用background

• 线性渐变：linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置…);

            /*方向：
            to top:0deg
            to right:90deg
            to bottom:180deg --默认值
            to left:270deg*/
            
            /*background: linear-gradient(to right,red,blue);*/
            background: linear-gradient(to right,red 0%,red 50%,blue 80%,blue 100%);

• 径向渐变：background: radial-gradient(形状 大小 坐标,颜色1，颜色2…);

            形状shape:circle:产生正方形的渐变色   ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
            at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
            大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
            /*background: radial-gradient(circle,red,blue);*/
            /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
            background: radial-gradient(at 10px 10px,red,blue);

• 重复渐变：

/*径向渐变重复*/
background: repeating-radial-gradient(
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);
/*线性渐变重复*/
background: repeating-linear-gradient(45deg,
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);

2.背景样式

• 背景平铺：background-repeat

            /*3.设置背景平铺
            round:会将图片进行缩放之后再平铺
            space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
            background-repeat: space;

• 背景是否滚动：background-attachment

            /*4.设置在滚动容器的背景的行为：跟随滚动/固定
            fixed:背景图片的位置固定不变
            scroll:当滚动容器的时候，背景图片也会跟随滚动*/

            /*local和scroll的区别：前提是滚动当前容器的内容
            local:背景图片会跟随内容一起滚动
            scroll:背景图片不会跟随内容一起滚动*/
            background-attachment: fixed;

• 背景大小：background-size

/*contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内
1.图片大于容器：有可能造成容器的空白区域,将图片缩小
2.图片小于容器：有可能造成容器的空白区域，将图片放大*/
/*background-size: contain;*/

/*cover:与contain刚好相反，背景图片会按比例缩放自 适应整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出
1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见
2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/
background-size: contain;

• 提升移动端响应区域的大小，用到的样式：background-origin，background-clip

            /*设置背景坐标的原点
            border-box:从border的位置开始填充背景，会与border重叠
            padding-box:从padding的位置开始填充背景，会与padding重叠
            content-box:从内容的位置开始填充背景*/
            background-origin: content-box;
            /*设置内容的裁切:设置的是裁切，控制的是从哪里显示
            border-box:其实是显示border及以内的内容
            padding-box:其实是显示padding及以内的内容
            content-box:其实是显示content及以内的内容*/
            background-clip: content-box;

3.过渡

• 语法：

            /*添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态*/
            /*1.transition-property:添加过渡效果的样式属性名称*/
            transition-property: left;
            /*2.transition-duration:过渡效果的耗时 以秒做为单位*/
            transition-duration: 2s;
            /*3.transition-timing-function:设置时间函数--控制运动的速度*/
            transition-timing-function: linear;
            /*4.transition-delay:过渡效果的延迟*/
            transition-delay: 2s;

			/*简写 transition:属性名称 过渡时间  时间函数  延迟*/
			transition: left 2s linear 0s;

			/*为多个样式同时添加过渡效果*/
            transition: left 2s linear 0s,background-color 5s linear 0s;