CSS3

target伪类

选择器:target{}

若该选择器被超链接设置锚点，则触发超链接时，改变样式。

色彩模式

• RGB(A):rgb(0~255,0~255,0~255(,0~1))
• HSL(A):hsl(颜色(0～360)，饱和度(0%~100%)，明度(0%~180%),(0~1))

H5中，明度默认是50%

文字阴影

text-shadow:2px 2px 2px gray;

前两个参数 表示阴影方向(x,y) ++右下 --左上 +-右上 -+左下

第3个参数，表示阴影的模糊程度，越大越模糊

第4个参数，表示阴影的颜色

(添加多个阴影，用逗号分隔)

盒子阴影

box-shadow:h v blur spread color inset

• h：水平方向的偏移值

• v：垂直方向的偏移值

• blur：模糊--可选，默认0

• spread：阴影的尺寸，扩展和收缩阴影的大小--可选默认0

• color：颜色--可选，默认黑色

• inset：内阴影--可选

盒模型

​ 给元素添加的宽高都是给内容区的，所以当设置padding和border时，整个元素的宽高会变大，影响其他元素。

​ 可以使用box-sizing来指定盒模型

• content-box：对象的实际宽度等于设置的width值和border、padding之和

• border-box：对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度

边框圆角

border-radius

• 1个值：同时设置四个角
• 2个值：左上&右下，右上&左下
• 3个值：左上，右上&左下，右下
• 4个值：左上，右上，右下，左下

添加/是用来设置当前个不同方向的半径值。

​ 水平x方向/垂直y方向

border-radius: 100px 70px/70px 100px;

线性渐变

linear-gradient(方向,开始颜色 位置,颜色2 位置, 颜色3 位置...)

方向：

• to top：0deg

• to right：90deg

• to bottom：180deg——默认值

• to left：270deg

background: linear-gradient(to right,red 50%,blue 50%);

径向渐变

radial-gradient(形状 大小 坐标)

形状：

• circle：圆形形渐变色
• ellipse：适配当前的形状 默认

坐标：

• 默认在正中心，可以赋值坐标，也可以赋值关键字
• at Xpx Ypx
• 以元素左上角为原点
• at [ left center right top bottom ]
• 可选择任意水平关键字和任意垂直关键字组合

大小：

• closest-side：最近边
• farthest-side：最远边
• closest-corner：最近角
• farthest-corner：最远角
• 默认是最远的角farthest-corner

background:radial-gradient(circle farthest-side at 50px 50px,red,blue);

重复渐变

径向

background:repeating-radial-gradient(circle closest-side at center center,
white 0%,white 10%, //通过位置渐变
black 10%,black 20%);

线性

background:repeating-linear-gradient(45deg,
white 0%,white 10%,
black 10%,black 20%);

背景

• 设置背景平铺
  • background-repeat:space；
  • round：会将图片进行缩放之后再平铺
  • space：图片不会缩放平铺，只是会在图片之间产生相同的间距值
• 设置在滚动容器的背景的行为：跟随滚动/固定
  • background-attachment:scroll;
  • fixed：背景图片的位置固定不变
  • scroll：当滚动容器的时候，背景图片也会跟随滚动
  • local和scroll的区别：前提是滚动当前容器的内容
    • local：背景图片会跟随内容一起滚动
    • scroll：背景图片不会跟随内容一起滚动
• 设置背景坐标的原点
  • background-origin:content-box;
  • border-box：从border的位置开始填充背景，会与border重叠
  • padding-box：从padding的位置开始填充背景，会与padding重叠
  • content-box：从内容的位置开始填充背景
• 设置内容的裁切：设置的是裁切，控制的是显示
  • background-clip:content-box;
  • border-box：其实是显示border及以内的内容
  • padding-box：其实是显示padding及以内的内容
  • content-box：其实是显示content及以内的内容

边框图片

• border-image-source:url(背景图片路径)
  • 会将背景图片分成一个九宫格，1-左上，3-右上，7-左下，9-右下
• border-image-slice: 25 fill;
  • 25表示四个角的裁剪尺寸 25*25px，剩下的部分为成为上下左右边框的背景图片,若不设置border-image-repeat则会被拉伸值边框长度
  • fill表示背景图片中心5，是否显示
• border-image-outset：1px;
  • 扩展边框
• border-image-repeat:round/repeat;
  • repeat：直接重复平铺
  • round：将内容缩放进行完整的重复平铺
  • stretch：将内容拉伸，不会平铺
• border-image-width：27px；
  • 边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
  • 细节：
    • 边框图片的本质是背景，并不会影响元素内容的放置
    • 内容只会被容器的border和padding影响
  • 缩写：
    • border-image:source slice / width/outset repeat;
    • border-image: url(QQ截图20190808154303.png) 56/*无px*/ fill /27px /0 round;

过渡效果

​ 添加过渡效果：过渡效果执行完毕之后，默认会还原到原始状态。

• transition-property
  • 添加过渡效果的样式属性名称
  • transition-property：left;
• transition-duration
  • 过渡效果的耗时以秒做为单位
  • transition-duration：2s;
• transition-timing-function
  • 设置时间函数--控制运动的速度
  • transition-timing-function:linear;
• transition-delay
  • 过渡效果的延迟
  • transition-delay：2s;
• 简写：transition
  • 属性名称 过渡时间 时间函数 延迟
  • transition:left 2s linear 0s；
  • 为多个样式同时添加过渡效果
  • transition:left 2s linear 0s，background-color 5s linear 0s;

transform 2D

• 使用translate实现元素的移动

  • 移动是参照元素的左上角
  • 执行完毕之后会恢复到原始状态
  • 如果只有一个参数就代表×方向
    • transform:translate(100px);
  • 如果有两个参数就代表x/y方向
    • transform:translate(400px,500px);
  • 添加水平或者垂直方向的移动
    • transform:translateX(300px);
    • transform:translateY(300px);
  • 可以使用百分比，百分比为元素自身的宽高

• 使用scale实现元素的缩放

  • 实现缩放1指不缩放, >1.01放大 <0.99缩小
    • 参照元素的几何中心
  • 如果只有一个参数,就代表x和y方向都进行相等比例的缩放
    • transform:scale(2);
  • 如果有两个参数,就代表x/y方向
    • transform:scale(2,1);
    • 缩放指定的方向
      • transform:scaleX(0.5);.
      • transform:scaleX(0.5);

• 使用rotate实现元素的旋转

  • 以元素中心为轴，顺时针按照角度旋转
  • rotate(角度deg);

• 使用skew实现元素的斜切

  • skew(角度deg) 等价于 skewX(角度deg)
    • 上边框行为：角度>0向左倾斜 , 角度<0向右倾斜
  • skewY(角度deg)
    • 左边框行为：角度>0向上倾斜 , 角度<0向下倾斜
  • skew(x角度deg,y角度deg)

• 使用transform-origin改变旋转中心

  • 默认旋转中心为元素的正中心
  • transform-origin:left top;
  • 改变旋转中心为左上角
  • 同时添加多个transform属性值
    • transform:属性值1 属性值2...; 使用空格分开
    • 注意：旋转时，元素坐标轴会随着旋转改变，所以一般先移动，再旋转

• 使用transform实现居中效果

  • 给父元素开启相对定位
  • 给需居中元素开启绝对定位
    • left:50%; top:50%;
  • 给需居中元素添加transform属性
    • transform:translate(-50%,-50%)

transform 3D

• 使用translate3d实现元素的移动

  • translate3d(X,Y,Z);
  • 只填一个参数无效
  • 默认Z轴垂直于屏幕，看不出效果

• 使用scale3d实现元素的缩放

  • scale3d(X,Y,Z);
  • 默认Z轴垂直于屏幕，看不出效果

• 使用rotate3d实现元素的旋转

  • rotate3d(X,Y,Z,deg);
  • 其中XYZ表示向量，旋转轴向量=X+Y+Z

  在变换和过渡时，最后会还原，导致看不出效果，需要给父元素添加transform-style属性

  transform-style: preserve-3d;

  ​ 保留3D变换效果

• 通过perspective景深透视效果

  • perspective:500px;
  • 数值表示距离z=0(屏幕)平面的距离

• 通过perspective-origin改变观察角度

  • perspective-origin:Xpx Ypx;

动画

创建动画

@keyframes 动画名{
0%{
/*动画起始*/
}
n%{
/*动画中途，可多个可不加*/
}
100%{
/*动画结束*/
}
}

使用动画

• animation-name：指定动画名称
  • animation-name:动画名;
• 设置动画的总耗时
  • animation-duration:2s;
• 设置动画的播放次数,默认为1次可以指定具体的数值，也可以指定infinite（无限次）
  • animation-iteration-count:1;
• 设置交替动画 alternate：来回交替
  • animation-direction:alternate;
• 设置动画的延迟
  • animation-delay：2s;
• 设置动画结束时的状态：默认情况下，动画执行完毕之后，会回到原始状态
  • forwards
    • 会保留动画结束时的状态，在有延迟的情况下，并不会立刻进行到动画的初始状态
  • backwards
    • 不会保留动画结束时的状态，在添加了动画延迟的前提下，如果动画有初始状态，那么会立刻进行到初始状态
  • both
    • 会保留动画的结束时状态，在有延迟的情况下也会立刻进入到动画的初始状态
• 动画的时间函数
  • animation-timing-function: linear;
  • linear匀速 ease慢快慢 step(n)分为n步——该属性与其他属性冲突
• 设置动画的播放状态
  • animation-play-state: paused;
  • paused：暂停 running：播放

web字体

第一步：使用font-face声明字体
lefont-face{
font-family:'webfont';src:url)'webfont.eot);/*IE9*/
arc:url)'webfont.eot?#iefix')format)'embedded-opentype')，/*TE6-TE8*/
url)'webfont.woff')format)'woff")，/*chrome、firefox*/
url)'webfont.ttf")format)'truetype')，/*chrome、firefox，opera、safari，Android，ios 4.2+*/
url)"webfont.svqtwebfont")format('avg");/*ios 4.l-w/
}
第二步：定义使用webfont的样式
.web-font{
font-family:"webfont" !important;
font-size：l6px;font-style:normal;
-webkit-font-smoothing:antialiased;
-webkit-text-stroke-width：0.2px;
-moz-oax-font-smoothing:grayscale;
}
第三步：为文字加上对应的样式
<i class="web-font">
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体
</i>

1. 得自定义想生成对应字体文件的内容
2. 使用网络资源生成web字体
3. 使用
   1. 定义自定义字体
   2. 定义样式使用自定义字体
   3. 指定样式，调用样式

字体图标

​ 在网络平台将图标变为字体

1. 放大不会失真
2. 较少请求
3. 便于维护

//开发时，一般使用伪元素
.smile::before{
    //原本为%#xe640  只用写%#x后内容
    //若写在innerHTML中 则需要写全部 但不直观不利于开发
    content:"\e641";
    color:red; font-size:50px;
 }

盒子伸缩

​ 设置父容器为盒子，会使每一个子元素自动变成伸缩项。当子元素的宽度和大于父容器宽度的时候，子元素会自动平均收缩。

• display:flex;——添加给父元素

• justify-content:space-around;——添加给父元素

  • 设置子元素在主轴(默认row 横)的排列方式
  • flex-start:让子元素从父容器的起始位置开始排列(左->右)
  • flex-end:让子元素从父容器的结束位置开始排列(右->左)
  • center:让子元素从父容器的中间位置开始排列
  • space-between:左右对齐父容器的开始和结束，中间平均分布，产生相同的间距
  • space-around:将多余的空间平均的分布在每一个子元素的两边，类似margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍

• align-items——添加给父元素

  • 设置子元素在侧轴(默认column 竖)的排列方式
    • flex-start:让子元素从父容器的起始位置开始排列(左->右)
    • flex-end:让子元素从父容器的结束位置开始排列(右->左)
    • center:让子元素从父容器的中间位置开始排列
    • stretch：拉伸,让子元素在侧轴方向上进行拉伸，填充满整个侧轴方问>>默认值
    • baseline：文本基线

• align-self——添加给子元素

  • 与align-items相同，但是align-items设置父元素中所有子元素的排列方式，align-self可以只设置给某个子元素，属性值相同

• flex-flow——添加给父元素

  • 是flex-wrap和flex-direction的综合
  • flex-wrap:控制子元素是否换行显示，默认不换行
    • nowrap:不换行--则收缩
    • wrap:换行
    • wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列
  • flex-direction:设置子元素的排列方向:就是用来主轴方向，默认主轴方向是row（水平方向）
    • row:水平排列方向，从左到右
    • column:垂直排列方向，从上到下
    • column-reverse:垂直排列方向，从下到上
  • flex-flow从以上两个属性的属性值中分别选择一个

• flex-grow——添加给子元素

  • 可以来扩展子元素的宽度，设置当前元素应该占据剩余空间的比例值
  • 比例值计算
    • 当前空间的flex-grow ÷ 所有兄弟元素flex-grow和
    • flex-grow的默认值是0

• flex-shrink——添加给子元素

  • 可以来缩小子元素的宽度，设置当前元素应该占据超出空间的比例值
  • 比例值计算
    • 当前空间的flex-shrink÷所有兄弟元素的flex-shrink的和
    • flex-shrink的默认值为1

• flex——添加给子元素

  • flex:[flex-grow][flex-shrink][flex-basis]；
  • 当使用flex缩写时，大多数情况下没必要使用这种语法
  • flex:[number]：这个语法指定了一个数字，代表了这个伸缩项目该占用的剩余空间比例
  • flex:auto：属性值被设为auto的伸缩项目，会根据主轴自动伸缩以占用所有剩余空间