标签：bubuko 形状 icon 样式 webkit 项目 gid sheet out
目录
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的负值，这时整个盒子的宽度就减小了，超出部分不显示。
标签：bubuko 形状 icon 样式 webkit 项目 gid sheet out
原文地址：https://www.cnblogs.com/lcc1995/p/10265237.html
