CSS3

139 阅读8分钟

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:内阴影--可选

盒模型

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

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

  • content-box:对象的实际宽度等于设置的width值和borderpadding之和

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

边框圆角

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:当滚动容器的时候,背景图片也会跟随滚动
    • localscroll的区别:前提是滚动当前容器的内容
      • 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;
    • 边框图片的宽度。如果没有设置这个属性,那么宽度默认就是元素的原始的边框宽度。
    • 细节:
      • 边框图片的本质是背景,并不会影响元素内容的放置
      • 内容只会被容器的borderpadding影响
    • 缩写:
      • 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-wrapflex-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的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间