css3相关内容

Posted 2020-08-08

在编写css3样式时，不同的浏览器可能需要不同的前缀。但为了更好的向前兼容前缀还是少不了。
-webkit:chrome,和safari;  -moz:firefox; -ms:IE;-o:opeara;

css3的好处：他把很多以前的需要的使用图片和脚本来实现的效果，甚至动画效果，只需要短短的几行代码就能搞定。他简化了开发人员的设计过程，加快了页面载入速度。

css3的一些效果：

border-radius：向元素添加圆角边框：
他的单位有培训，百分比，em等
box-shadow:向盒子添加阴影；

他的语法 box-shadow:x轴的偏移量 Y轴的偏移量 [阴影模糊的半径][阴影扩展半径][阴影颜色][投影方式]；
阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

text-shadow:设置文本的阴影效果；
语法：text-shadow:x=offset Y-offset blur color;

rgba:表示的是一种彩色标准，rgba就是在rgb的基础上增加了alpha透明度的参数语法为：color:rgba(r,g,b,透明度参数)
CSS3 Gradient 线性渐变linear-gradinet
liner参数：第一个参数指定渐变的方向，(to top：表示的有下到上的方向；to bottom,to left：表示由右到左的方向,to right,to top left:表示由右下角到左上角的方向 ,to top right)可以用角度的关键词或英文来表示 180deg；
第二个参数和第三个人参数表示颜色的起始点和结束点，可以有多个颜色值。
嵌字体@font-face: 他能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：@font-face{
font-family:字体名称；
src:字体文件在服务器上的相对路径或绝对路径；
}
background-origin:设置元素背景的原始位置
语法：background-origin:border-box|padding-box|content-box;但是背景表示no-repeat，这个属性无效，他会从边框开始显示。
background-clip:用来将背景做适当的剪裁以适应实际需要；
语法：background-clip ： border-box | padding-box | content-box | no-clip

css3中的伪类选择器

:root 选择器匹配元素E所在文档的根元素。
:not 否定选择器，可选择除某个元素之外的所有元素，与jquery的：not选择器一样的
:empty用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有;
:target目标选择器用来匹配文档的url的某个标识符的目标元素
:first-of-type:用来定位一个父元素下的某个类型的第一个子元素。
:last-of-type:用来定位一个父元素下的某个类型的最后一个子元素:
:only-child：匹配元素的父元素中仅有一个子元素，并且还是唯一的子元素
::selection:用来匹配突出显示的文本，一般的情况下用鼠标选择网页文本默认的是背景是深蓝色的，字体是白色的。通过::selection伪元素可以来改变。
:ready-only伪类选择器用来指定只读状态元素的样式
:read-write伪类选择器用来指定非只读状态元素的样式。
::before和::after
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

还有类似：first-child和:last-child,:nth-child,:nth-last-child，:checked,:disabled,:enabled等等

css3中一些动画效果的函数：
旋转函数rotate():通过指定的角度参数使元素相对原点进行旋转。参数可为负值表示元素相对原点逆时针旋转。要配合transform来用
扭曲函数skew()：能使元素倾斜显示，并且skew()函数不会旋转，而只会改变元素的形状。他有三种情况：1.skew(x,y) 2.skewX(x) 3.skewY(y)
缩放函数scale()：让元素根据中心原点对对象进行缩放。他也有三种情况：1.scale(x,y) 2.scaleX(x) 3.scaleY(y)
位移函数translate()可以将元素向指定的方向移动，他也有三种情况：1.translate(x,y) 2.translateX(x) 3.translateY(y)