css的常用效果总结

小编 2026-06-12 阅读:897 评论:0

1.模糊遮罩效率，模糊滤镜效果-webkit-filter: blur(3px);-moz-fi...

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);}