css3总结

Posted 2021-02-03 lcc1995

目录

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-1、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的负值，这时整个盒子的宽度就减小了，超出部分不显示。