首页 > 代码库 > css3相关内容
css3相关内容
在编写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)
css3相关内容