css filter(滤镜) 属性（图片变灰）
用法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
例子：
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
opacity:0.7;//通过改变透明度来调节灰色的程度
}
none 默认值，没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 brightness(%) 给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。 其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 drop-shadow(h-shadow v-shadow blur spread color) 给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似； 不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下： <offset-x> <offset-y> (必须) 这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果). <blur-radius> (可选) 这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利). <spread-radius> (可选) 这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。 <color> (可选) 查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。 grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； hue-rotate(deg) 给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。 该值虽然没有最大值，超过360deg的值相当于又绕一圈。 invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。 值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 opacity(%) 转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。 saturate(%) 转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的， 则有更高的饱和度。 若值未设置，值默认是1。 sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； url() URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。 例如： filter: url(svg-url#element-id) initial 设置属性为默认值，可参阅： CSS initial 关键字 inherit 从父元素继承该属性，可参阅：CSS inherit 关键字
css 空心字母，空心字
color: #FFFFFF !important; text-shadow: 1px 1px #0DADC5,-1px -1px #0DADC5,1px -1px #0DADC5,-1px 1px #0DADC5;
css 字体渐变色
.gradient-text {
font-size: 74rpx;
font-weight: bold;
background: linear-gradient(to right, #1ae8c8, #4a8aff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;}
css 背景渐变
.gradual{ background: linear-gradient(red, orange); }
线性渐变 - 从左到右
.gradual{background: linear-gradient(to right, red, orange); }
线性渐变 - 对角
.gradual{background: linear-gradient(to bottom right, red, orange); }
线性渐变 - 带有指定的角度
.gradual{background: linear-gradient(60deg, red, orange); }
css css :not的多个条件的写法
table tbody tr:not(:first-child):not(:last-child) td
{
text-align: right;
}
以上代码可以选择table表格中tbody部分非首个、非最后一个的tr，并设置其子元素td文本样式居右
css 自适应分几层样式
@media all and (max-width: 1500px) @media all and (max-width: 1024px) @media all and (max-width: 990px) @media all and (min-width: 991px) @media all and (max-width: 767px)
css position：sticky
粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
css iconfont字体调用
@font-face {
font-family: 'bonake';
src: url('../font/bonake.eot?utuc4q');
src: url('../font/bonake.eot?utuc4q#iefix') format('embedded-opentype'),
url('../font/bonake.ttf?utuc4q') format('truetype'),
url('../font/bonake.woff?utuc4q') format('woff'),
url('../font/bonake.svg?utuc4q#corpfont') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="bonake_"],
[class*="bonake_"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'bonake' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bonake_pro-nav:before{content: "\e62B";font-size: 26px;padding-right: 5px;}
.bonake_qiye-nav:before{content: "\e6d5";font-size: 26px;padding-right: 5px;}
.bonake_kefu:before{content: "\e6ac";}
.bonake_shop:before{content: "\e621";}
.bonake_tel:before{content: "\e611";}
.bonake_email:before{content: "\e649";}
.bonake_massge:before{content: "\e61a";}
css css 超出显示省略号
white-space:nowrap;overflow:hidden; text-overflow:ellipsis; clip : 不显示省略标记（...），而是简单的裁切 ellipsis : 当对象内文本溢出时显示省略标记（...）
css css 盒子阴影
box-shadow: 10px 10px 5px #888888; box-shadow: h-shadow v-shadow blur spread color inset;水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将（inset）外部阴影 (outset) 改为内部阴影 字体阴影 text-shadow: 10px 10px 5px #888888; text-shadow: h-shadow v-shadow blur spread color inset;水平阴影的位置 垂直阴影的位置 模糊距离 阴影的尺寸 阴影的颜色 将（inset）外部阴影 (outset) 改为内部阴影
css 相关属性
css文字对齐
text-align: justify;
结合相对位置居中
.dd{position: relative;}
.dl{position: absolute;transform:translate(-50%,-50%); left:50%; top:0;}
字的间距
letter-spacing：2px;
css3背景透明
background:rgba(200, 54, 54, 0.5);
或
img{opacity:0.4;filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */}
结合相对位置居中
.dd{position: relative;}
.dl{position: absolute;transform:translate(-50%,-50%); left:50%; top:0;}
满高实现如下：height:100vh;
css 圆角：
border-radius：5px;
让图片变糊糊：
-webkit-filter: blur(10px);
filter: blur(10px); 值越大越糊糊
css 鼠标经过图片放大
img {transition: all 1s ease;}
img :hover{transform: scale(1.1);transform: scale3D(1.1, 1.1, 1.1); /* 放大1.2倍 */ }
图片全覆盖显示：
.dfd img {display: block;-o-object-fit: cover;object-fit: cover;}
css 滚动条的css样式主要有三部分组成
1、::-webkit-scrollbar 定义了滚动条整体的样式；
2、::-webkit-scrollbar-thumb 滑块部分；
3、::-webkit-scrollbar-thumb 轨道部分；
案例：
<div class="test test-1">
<div class="scrollbar"></div>
</div>
.test{width: 50px;height: 200px;overflow: auto;float: left;margin: 5px;border: none;}
.scrollbar{ width: 30px;height: 300px;margin: 0 auto;}
.test-1::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;}
.test-1::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
}
.test-1::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
css justify-content 属性
div
{
display: flex;
justify-content: space-around;
}
/* 对齐方式 */
justify-content: center; /* 居中排列 */
justify-content: start; /* 从行首开始排列 */
justify-content: end; /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end; /* 从行尾位置开始排列 */
justify-content: left; /* 一个挨一个在对齐容器得左边缘 */
justify-content: right; /* 元素以容器右边缘为基准，一个挨着一个对齐, */
/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;
/* 分配弹性元素方式 */
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around; /* 均匀排列每个元素
每个元素周围分配相同的空间 */
justify-content: space-evenly; /* 均匀排列每个元素
每个元素之间的间隔相等 */
justify-content: stretch; /* 均匀排列每个元素
'auto'-sized 的元素会被拉伸以适应容器的大小 */
/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;
/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;
css CSS样式ul下li奇数偶数样式
li:nth-of-type(odd){ margin-left: 5px;}奇数行
li:nth-of-type(even){margin-left: 5px;}偶数行
CSS3 :nth-child() 选择器
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型
p:nth-child(odd)
p:nth-child(even)
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
p:nth-child(3n+0)
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
css 让过渡效果持续5秒
div{widht:100px;height:100px;background:blue;transition-property:width;
transition-duration: 5s;
-moz-transition-duration: 5s; /* Firefox 4 */
-webkit-transition-duration: 5s; /* Safari 和 Chrome */
-o-transition-duration: 5s; /* Opera */}
div:hover {width:300px}
css css3背景颜色渐变属性
background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%); background: -o-linear-gradient(top, #000000 0%,#ffffff 100%); background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%); background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
css 手机端rem与px的换算
假设1：我们设置html的字体大小的值为html｛font-size: 62.5%;｝（也就是10px）。 主题大小是960px；换算成rem就是960/10=96rem； 假设2：我们设置html的字体大小的值为html｛font-size: 87.5%;｝（也就是14px）。 主题大小是960px；换算成rem就是960/14=68.57142857142857rem；