css3总结

目录

Transition过渡  

Transition的分体属性：

贝塞尔曲线cubic-bezier  

Body自己没有高度，html自己也没有高度，document的高度是可视区域。

文字阴影  

HTML5新增表单控件  

Input在HTML5中新增了不少的类型

新增表单属性  

属性选择器  

子元素选择器（结构性伪类）

伪类选择器  

盒模型  

1. 阴影box-shadow  

2. 倒影box-reflect(须要加内核前缀使用)  

3. Resize  

4. 遮罩mask（要加内核前缀）跟背景属性值同样

弹性盒模型（目前兼容性不是很好）

1. display：flex设置给父级；  

2. flex-direction设置主轴设置给父级：  

3. justify-content主轴对齐设置给父级：  

4. align-items侧轴对齐  

5. flex-wrap换行  

6. align-content（伸缩行侧轴的对齐方式）  

7. flex-flow  

弹性盒模型子级须要的设置  

1. order 显示顺序  

2. flex所占整体的份数；  

3. align-self

Background  

多背景  

背景原点设置  

背景图裁切  

渐变：  

线性渐变  

径向渐变  

 

Transition过渡

必不可少的一个参数是：秒数；

Transition是添加给须要有变更的元素的常态样式上，而不是该元素有hover等变更时。

div {

width: 200px;

height: 200px;

background-color: red;

transition:2s width, 2s height, transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

}

div:hover {

transform: rotate(360deg);旋转360度

width: 300px;

height: 300px;

background-color: green;

}

经过以上语句可实如今2s时间内完成宽度变300px高度变300px以及变背景的动画效果，过渡只对数值性的东西起做用，好比宽高颜色值等，而对于左右浮动这种没有数值考量的是不起做用的。

 

Transition的分体属性：

transition-property  要运动的样式  （all || [attr] || none）

transition-duration 运动时间

transition-delay 延迟时间

transition-timing-function过分效果的时间曲线

ease：（逐渐变慢）默认值

linear：（匀速）

ease-in：(加速)

ease-out：（减速）

ease-in-out：（先加速后减速）

cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ）

贝塞尔曲线cubic-bezier

transition:6s cubic-bezier(0.400, -0.240, 0.755, 1.2);贝塞尔曲线规定了transition的变化速度轨迹，如题意思是：在运动初期会先向后缓冲而后加速前进，到达终点后冲出终点有再反弹回终点。

 

Body自己没有高度，html自己也没有高度，document的高度是可视区域。

文字阴影

• text-shadow:x偏移量 y偏移量 模糊半径 颜色；

text-shadow:5px 5px 10px red;红色模糊背景，半径10px，距离左边5px距离上边5px，若是想要多重阴影，只要用逗号隔开便可。

text-shadow:5px 5px 10px red，text-shadow:5px 7px 20px red;

先写的在上方，后写的在下面

• -webkit-text-stroke:描边宽度，颜色，可是只有谷歌支持是webkit的私有

• text-overflow:文字溢出显示省略号：ellipsis

 

 

• direction：rtl；文字书写方向右到左，ltr左到右

• direction: rtl; unicode-bidi: bidi-override; unicode-bidi:大概的含义是：编码顺序：顺序推翻；direction: rtl必须配合unicode-bidi:使用，不然没效果。

• fontLab studio+ai制做文字图标字体，将ai中的路全选径复制到fontlab里面制做生成图标文字，导出.ttf文件后在线制做成兼容各类合法字体，下载使用便可（制做各类合法字体的网站：http://www.fontsquirrel.com/tools/webfont-generator）

 

下载后除了

 

压缩包之外其余都删除掉，而后解压：

 

将横线文件及html都删除：而后在应用的时候调用stylesheet.css而后在用到字体的地方将字体用font-family引用进去便可（在字体的stylesheet.css文件中，能够定义字体的名字，在引用的时候直接引用定义好的名字便可）

http://www.iconfont.cn/repositories/60 阿里妈妈字体库

HTML5新增表单控件

Input在HTML5中新增了不少的类型

• email跟text很像，可是会判断是不是邮箱地址

• tel跟text很像，可是在移动端时触发以后会自动切换到数字键盘，不会判断是不是电话号

• url跟text很像，可是会验证是否是网址（根据http://或者https://或者ftp://等网络传输协议进行判断）

• search跟text很像，可是有文字输入以后在框的最后面有个“X”，在输错的时候能够点击清空以前输入的内容

• range数量选择，有min max value step几个属性，在value值和step冲突的时候会自动纠正进行显示

• number也是数量选择，可是样式有不一样，在value值和step min max冲突的时候会先显示value，在加减的时候再纠正。

• color就是一个取色器，可将选中的颜色配合submit进行提交，一般用在主题中

点击颜色后出现取色器

• datetime-local显示完整的日历，不含时区

• time显示具体的时间（小时：分钟）

• date显示日期（月-日）

• week显示这周是今年第几周

• month显示本月是今年第几月

新增表单属性

• password其中加入了一个属性值placeholder=“请输入密码” ，在点击开始输入时placeholder的内容会自动消失，支持文字color设置

更改文字颜色：注意是双冒号还要加前缀

• required，当没有输入值时就切换的tab时会提示还没输入，只要写上这个属性就生效，不用写值。

• autocomplete是否显示以前输入过的值有on和off两个值

有name值时，不设置off的状况下：

设置off之后输入框本来输入过的东西就不会被保存了。

• autofocus加载进来以后或者刷新以后自动获取焦点，跟checked同样，只要写上这个属性就生效，不用写值。

表单的<form action=”这里写提交成功跳转的地址”></form>是必需要写的否则不会提交的

• datalist定义input下可能会出现的选项（为输入框构造一个选择列表），支持首字母检索，好比输入c就出来css

注意这个标签是配合input的，将这个标签的id写到input的list属性中去。

• pattern正则验证，一堆的转译字符表示的验证过程，通常从网上找就好了

若是输入与要求不一致则显示：

• formaction当须要另外提交一个地址的时候：配合submit使用

属性选择器

• E[attr]只是用属性名，但没有肯定任何属性值（这里的miaov是个自定义属性，支持自定义属性）

• E[attr=”value”]限制属性值的选择

• E[attr~=”value”]是指属性名中有这一项便可被选中

、

这时候上面两条会都被选中

• E[attr^=”value”]是指属性名中以value值开头的便可被选中

• E[attr$=”value”]以value值结尾的便可被选中

• E[attr*=”value”]包含有value值的便可被选中

• E[attr|=”value”]以value值加-开始的便可被选中，好比value=g 那么就选中了以g-开头的元素

子元素选择器（结构性伪类）

• body p:nth-child(1){……………………;}选择body下第一个元素，且必须是p元素

• body  :nth-child(1){……………………;}选择body下第一个子元素，不限制元素类型

• body :nth-child(even){……………………;}选择body下的偶数子元素，不限制类型

• body :nth-child(odd){……………………;}选择body下的偶数子元素，不限制类型

• body :nth-child(2n){……………………;}选择body下的递进元素，数列的写法。3n-一、3n+1等

• body :nth-last-child(1){………………;}倒数第一个子元素

• body p:nth-of-type(2){………………;}找到body下第二个p类型的元素

• body  :nth-of-type(2){………………;}找到body下第二个不限类型的元素（能够同时找到第二个p第二个h1等全部类型的第二个）

• body  :nth-last-of-type(2){………………;}从后往前数找到body下第二个不限类型的元素

• p:nth-child(1){……………………;}p元素父级下的第一个p，支持class或者id，支持隔代选择

这种状况下依然可使用

选中p

例如：

能够用

显示成

伪类选择器

• E:target（哈希选择器或锚点选择）代表当前url片断的元素类型，这个元素必须是E

便可实现点击切换

• E:disabled代表不可点击的表单控件；E:enabled代表可点击的表单控件

• E:checked

• E:first-line，选择元素的第一行

• E:first-letter，选择元素的第一个字符

• E::selection，定义元素选中状态下的样子（背景，字体颜色等）

• E::before生成内容在E以前

• E::after生成内容在E以后

• E:not(E1)含义是给除了E1之外全部E加样式

• E~F选择E元素后面的全部的同级F标签，非同级是选不中的

• E+F选择E元素后面的紧挨着的一个同级F标签

• 模拟单选的示例

盒模型

• 阴影box-shadow

Box-shadow:x偏移量 y偏移量 模糊半径 阴影颜色

可选参数：inset 内阴影 写在第一位

扩展半径含义：边框扩展多少以后再开始模糊

Box-shadow:inset 10px 10px 30px 50px #000;

含义是内阴影 偏移量是10px 10px 模糊半径是30px 在扩展50px以后开始模糊  模糊颜色是黑色

若是想既有内阴影也有外阴影的话，直接在写完内阴影以后用逗号隔开继续写外阴影的参数便可

（扩展：作一个只有右侧阴影，扩展值为负值另外加一个右侧的偏移量）

• 倒影box-reflect(须要加内核前缀使用)

基本参数：above（上）below（下）right left

倒影和阴影是不占位置的

Box-reflect：above 5px；含义是：有一个上方的倒影距离实体5px

其中有个参数是：linear-gradient渐变：也要加前缀使用

linear-gradient（rgba（0,0,0,0.1） 50%，rgba（0,0,0,1） 100%）

含义是从黑色0.1透明到黑色不透明的渐变，两种颜色各占50%

• Resize

Textarea默认有可拖动的宽高，这时给resize：none；便可实现不可拖动

Resize：both（水平垂直都可拖动）horizontal（水平）vertical（垂直）

Resize必须和overflow：auto配合使用

Textarea的cssreset

• 遮罩mask（要加内核前缀）跟背景属性值同样

遮罩层是个png图片，有颜色的部分是未来要显示内容的部分，透明的图片是不需显示的地方

#box{-webkit-mask:url(遮罩png图片) no-repeat 20px 30px;transition：2s；}

#box：hover{-webkit-mask-position: 200px 300px; }

（倒影和遮罩只支持-webkit-内核浏览器：chrome Safari opera）

Caniuse.com能够查看属性支持程度

弹性盒模型（目前兼容性不是很好）

• display：flex设置给父级；

须要flex-direction定义主轴和侧轴，定义x为主轴后y天然为侧轴

• flex-direction设置主轴设置给父级：

row左到右row-reverse右到左column上到下column-reverse下到上

• justify-content主轴对齐设置给父级：

Flex-start（元素在开始位置，空白占据另外一边）

flex-end（元素在结束位置，空白占据开始一边）

flex-center（元素居中，空白占据两边）

space-between（空白在元素中间平均分布）

space-around（空白在元素两边平均分布）

• align-items侧轴对齐：

有flex-start、 flex-end、 flex-center、 space-between、 space-around属性，侧轴对齐后行之间会有间隙平均分配的一个间隙，使用伸缩行的对齐能够去掉这个间隙

• flex-wrap换行

nowrap不换行 wrap换行 wrap-reverse反向换行，flex-wrap是针对伸缩项目的，使用会有相似以下状况出现：

• align-content（伸缩行侧轴的对齐方式）

伸缩行的对齐，能够打破以前侧轴的对齐方式：

有flex-start、 flex-end、 flex-center、 space-between、 space-around属性

在父级设置display：flex；以后，子级的块元素便可横向排列且没有间隙，可是当子级宽度超过父级以后，父级会挤压子级，使子级会不受自身宽高设置而变形以适应父级的宽度，不会存在超出的问题；

若是给子级添加了margin值之后，margin值不会被挤压，子级的宽度就等于父级宽度减去全部margin值以后除以子级的个数；在设置了flex的父级的子级中margin：auto显示成水平垂直居中

若是不想让子级变形，则须要给父级设置flex-wrap：wrap；

• flex-flow

是flex-direction和flex-wrap的合写，格式是：flex-flow：[flex-direction][flex-wrap]

弹性盒模型子级须要的设置

• order 显示顺序

全部子元素默认的order都是0，

此时第一个div就会跑到最后的位置，由于它的order比其余的div的order都大，order能够是负值

• flex所占整体的份数；

以下是将父级分红了1+2+3+4+……+8共36份，其中第一个div占了一份，flex能够是none，意思是不参与份数保持原大小，能够是auto

• align-self

有flex-start、 flex-end、 center属性

Background

Background-size：contain包含 cover覆盖 

包含是图片按比例放大，当宽或者高一个方向撑满时中止，有可能铺不满；覆盖是图片按比例放大，直到铺满整个区域，超出部分隐藏

 

多背景

先写的在上面，后写的在下面显示，多个背景用逗号隔开写就好了，多背景状况下加背景颜色加到最后

若是设置hover时二者都要写（即便其中一个不动也要写上0 0，）：

背景原点设置

Background-origin：

border-box，边框左上角、padding-box，padding左上角、content-box，content左上角

背景图裁切

Background-clip：

border-box，包括边框在内的全部区域、padding-box，padding以及其之内的区域、content-box，content范围内的区域、text能够给text添加图像叠加:

text的背景是webkit私有属性，要加前缀才有效：-webkit- background-clip:text;

也能够写成：

此时为了实现文字的背景，组要给文字加透明color：rgba（0,0,0,0），这是文字后面就会有图片叠加的效果

渐变：

背景渐变属于background-image的范畴

线性渐变

Background-image：linear-gradient（0deg，red，blue）第一个输参数能够写度数也能够写方向关键字（好比：left等），用度数写的时候不用加内核前缀，用方向关键词写的时候就要加内核前缀。

Background-image：linear-gradient（40deg，red 0%，blue 50%）；

含义是：40度的渐变，从红色开始过渡到蓝色，红色在50%的位置彻底消失，后面都是蓝色（其中百分比能够写成具体px值），若是两个值同样都是50%则会在50%的位置出现明显分界：

Ie浏览器下只能用滤镜来实现：

Filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’blue’,endcolorstr=‘red’,GradientType=’1’); startColorstr开始颜色endcolorstr结束颜色GradientType渐变方向0是上下，1是左右

 

Repeating-linear-gradient用来循环背景用：下面语句含义是：0到10%是黑色，10%处出现黑白颜色的尖锐切换即黑白颜色同时出如今10%的位置，而后白色持续到20%再次出现尖锐换色，而后将这个规律循环下去。（0黑色—10%黑色10%白色---20%白色20%黑色）

效果以下：

还能够经过复制以上语句，改下角度270deg便可获得各自似的背景

 

范例：实现白光闪过：设置背景图片，同时在背景图片上面加渐变，渐变角度160，从透明到白色再到透明，并在初始状态下移出图片范围-260px，而后hover的时候改变白光的位置便可。须要注意的是hover改变位置的时候白光和图片的位置都要写，即便图片不变更仍是0 0.background-size也要写全，没变更的写auto

 

www.tjrus.com里面的东西使用纯css写的

径向渐变

Background:radial-gradient(位置x 位置y，宽x 高y，颜色1 范围，颜色2 范围)

还有形状circle square设置形状就不能设置大小，两者只能选择一个

background:radial-gradient（）

filter滤镜

grayscale灰度（要加前缀使用）

标准浏览器下要加前缀，grayscale的值是百分数，在ie下要用filter：gray；

标准浏览器中：

-webkit-filter：grayscale（50%）；

-moz-filter：grayscale（50%）；

-ms-filter：grayscale（50%）；

在ie67下用filter：gray；不能够设置具体的数值

Blur模糊

标准浏览器下：

加内核前缀便可

Ie6-9须要用代码解决：

transform 变换 都可接收负数

Rotate旋转

 

Transform：rotate（180deg）；旋转180度

考虑到移动端，因此都加上内核前缀；

用transform作变换的时候最好是将默认状态都写上

Transform-origin旋转轴点

若是想要围绕左上角作旋转的话，则Transform-origin：left top;若是只写一个关键词时则默认另外一个值是center，另外还能够用具体数值，数值坐标原点是元素左上角

Scale缩放分xy轴

transform：scale（2）；值是倍数

transform：scaleX（2）；Transform：scaleY（2）；

值支持小数点

skew斜切分xy轴

transform：skew（20deg，20deg）；值是度数，能够写一个就是x轴倾斜角度（倾斜边和y轴之间的角度），写2个后者是y轴，这里xy值同样的时候也要写两个值

translate偏移分xy轴

transform：translate（20px，20px）；x轴右移20px，y轴下移20px

也能够分开写：transform：translateX（20px），translateY（20px）；

示例1

知识点：斜切、渐变、margin负值

• 给a设置

可是这是里面的字也会倾斜，那么把字正过来：

• 给第一个和最后一个a设置margin负值；

• 注：斜切出来的角是不占位置的，因此给第一个a加了左margin负值的时候整个盒子的宽度就减少了，再给最后一个盒子一个右margin的负值，这时整个盒子的宽度就减少了，超出部分不显示。