1.img.desaturate {
filter: grayscale(100%);(黑白)
filter:sepia(100%);(褐色)
filter:saturate(0.5);(饱和度)
filter:hue-rotate(90deg);(色相旋转)
filter:invert(1);(反色)
filter:blur(3px);(模糊)
filter:contrast(2);(对比度)
filter:brightness(.5);(亮度)
}
2.<p contenteditable="true">,用户能够修改页面上的内容。
3.<p dir="ltr">从左到右</p>
<p dir="rtl">从右到左</p>
4.spellcheck="true|false" 提示拼写错误,只能放在可以编辑的地方
5.cursor: url(jartto.cur), url(http://jartto.wang/jartto.gif), auto;
http://www.phpvar.com/archives/1993.html
6..icon {
display: inline-block;
width: 16px;
height: 20px;
background-image: url(http:jartto.wang/test.png);
background-color: currentColor; /* 该颜色控制图标的颜色 */
background-position: 0 0;
}
.link:hover {
color: #333; /* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */
}
http://blog.jobbole.com/79080/
7.如何去掉 chrome input 的背景黄色
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.5) inset !important;
}
当然,你也可以使用方案二,如下:
input:-webkit-autofill {
-webkit-animation-name: autofill;
-webkit-animation-fill-mode: both;
}
@-webkit-keyframes autofill {
to {
color: #fff;
background: transparent;
}
}
8. border-color: red green blue pink;border渐变
9.filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
filter:drop-shadow(5px 5px 10px black)
CSS3 滤镜 filter 中的 drop-shadow,drop-shadow 滤镜可以给元素或图片非透明区域添加投影。
10.https://www.cnblogs.com/lyd2016/p/6139383.html
/*滚动条 start*/
::-webkit-scrollbar {
width: 1px;
height: 4px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background: #fff ;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
// background-color:rgba(7, 170, 247, 0.7);
background-color: transparent;
}
::-webkit-scrollbar-thumb:hover {
border-radius: 3px;
box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color:rgba(7, 170, 247, 1);
}