css3总结

Posted lcc1995

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css3总结相关的知识,希望对你有一定的参考价值。

目录

Transition过渡  

Transition的分体属性:

贝塞尔曲线cubic-bezier  

Body本身没有高度,html本身也没有高度,document的高度是可视区域。

文字阴影  

HTML5新增表单控件  

InputHTML5中新增了很多的类型

新增表单属性  

属性选择器  

子元素选择器(结构性伪类)

伪类选择器  

盒模型  

1. 阴影box-shadow  

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

3. Resize  

4. 遮罩mask(要加内核前缀)跟背景属性值一样

弹性盒模型(目前兼容性不是很好)

1. displayflex设置给父级  

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新增表单控件

InputHTML5中新增了很多的类型

? 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可以查看属性支持程度

弹性盒模型(目前兼容性不是很好)

? displayflex设置给父级

需要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-wrapwrap

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

 

 

技术分享图片

 

以上是关于css3总结的主要内容,如果未能解决你的问题,请参考以下文章

Css3最新特性总结

个人总结(css3新特性)

css3动画总结

个人总结(css3 新特性)上

css3d总结

CSS3选择器总结