1.模糊遮罩效率,模糊滤镜效果

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

2.渐变

background:-moz-linear-gradient(left,#ace,#f96);/*Mozilla*/
background:-webkit-gradient(linear,0 50%,100% 50%,from(#ace),to(#f96));/*Old gradient for webkit*/
background:-webkit-linear-gradient(left,#ace,#f96);/*new gradient for Webkit*/
background:-o-linear-gradient(left,#ace,#f96); /*Opera11*/
background: -moz-linear-gradient(<angle>, #ace, #f96);
background: -webkit-gradient(<type>,<angle>, from(#ace), to(#f96));//老的写法
background: -webkit-linear-gradient(<angle>, #ace, #f96);
background: -o-linear-gradient(<angle>, #ace, #f96); .deg45 {
background: -moz-linear-gradient(45deg, #ace, #f96);
background: -webkit-gradient(linear,0 100%,100% 0%,from(#ace),to(#f96));
background: -webkit-linear-gradient(45deg, #ace, #f96);
background: -o-linear-gradient(45deg, #ace, #f96);
}

3.多行文本省略(兼容性不好)

    p {
width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:;
right:;
padding:0 20px 1px 45px;
// background:url(和网页背景颜色一样的一张背景图) repeat-y;
background-color:#fff;
}
/*
注意:
height高度正好是line-height的3倍;
结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用...去模拟;
要支持IE8,需要将::after替换成:after;
*/

4.弹性布局居中:在父级元素上面加上上面3句话,就可以实现子元素水平垂直居中。

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

5.给input placeholder 设置颜色

::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999;
}

6.媒体查询

@media screen and (min-width:960px) and (max-width:1200px){
  body{background:yellow;}
}

7、如何修改chrome记住密码后自动填充表单的黄色背景 ?

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); /* #FAFFBD; */
background-image: none;
color: rgb(0, 0, 0);
}

  

https://mp.weixin.qq.com/s/dYCWYeM629DwiSqmaaAs1w

最新文章

  1. Java的RMI远程方法调用实现和应用
  2. modelsim无法识别include文件的解决方法
  3. 4.20-4.24程序设计基础结束,UID课程
  4. HDFS Append时packet的格式以及DataNode对block/checksum文件的处理
  5. Swift语言中为外部参数设置默认值可变参数常量参数变量参数输入输出参数
  6. UVa 247 (传递闭包) Calling Circles
  7. ubuntu14.04源代码安装postgresql 9.1
  8. MySQL修改时区的方法小结
  9. 在Ubuntu上安装使用Systemtap
  10. 【OpenCV新手教程之十一】 形态学图像处理(二):开运算、闭运算、形态学梯度、顶帽、黑帽合辑
  11. PHP数组函数试题
  12. Linux学习(十六)VIM
  13. memset库函数
  14. 在VirtualBox中安装BlackArch Linux
  15. Centos 7.6搭建Tomcat 环境,发布Java项目
  16. vue安装遇到vue不是内部变量
  17. HBase电子书
  18. sqlserver中的数据转换与子查询
  19. 2109 ACM 排序
  20. Python自动化开发 -进程、线程和协程(二)

热门文章

  1. .Net 5分钟搞定网页实时监控
  2. 项目实战13—企业级虚拟化Virtualization-KVM技术
  3. Softmax多分类算法
  4. Bandit Wargame Level18 Writeup(interactive shell and .bashrc )
  5. NodeJs学习笔记(五)---单元测试补充
  6. 《程序设计方法》【PDF】下载
  7. 【十八】php文件下载源码
  8. JavaWeb框架_Struts2_(五)-----&gt;Struts2的标签库
  9. 与apk签名有关的那些概念与命令
  10. CGO 类型(CGO Types) 一