css的常用效果总结

简介: 1.模糊遮罩效率,模糊滤镜效果-webkit-filter: blur(3px);-moz-filter: blur(3px);-o-filter: blur(3px);-ms-filter: blur(3px);filter: blur(3px); 2.

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: 2;
            -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:0;
    right:0;
    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);
}

  

 

目录
相关文章
|
移动开发 HTML5
HTML5 + CSS3 总结 - 知识框架 思维导图
HTML5 + CSS3 总结 - 知识框架 思维导图
138 0
HTML5 + CSS3 总结 - 知识框架 思维导图
|
前端开发 JavaScript 容器
css知识总结
css知识总结
127 0
css知识总结
|
前端开发 容器
CSS总结
CSS总结
123 0
|
前端开发
学习CSS的简单总结(2)
在"学习CSS的简单总结(1)" 里总结了怎样使用css。 本文是总结一下具体的使用。CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 最常见的 CSS 选择器是元素选择器。
学习CSS的简单总结(2)
|
数据采集 XML 前端开发
学习CSS的简单总结(1)
记录:CSS是什么;CSS三种方法的使用;CSS简单举例;推荐使用外部样式。
学习CSS的简单总结(1)
|
人工智能 前端开发 容器
CSS入门到进阶知识总结(二)
CSS入门到进阶知识总结(二)
CSS入门到进阶知识总结(二)
|
前端开发 安全 JavaScript
|
前端开发
CSS水平居中+垂直居中+水平/垂直居中的方法总结
CSS水平居中+垂直居中+水平/垂直居中的方法总结
194 0
CSS水平居中+垂直居中+水平/垂直居中的方法总结
|
前端开发 UED
CSS3的3D相关属性总结
项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。
183 0
CSS3的3D相关属性总结