CSS填坑代码大全

2019独角兽企业重金招聘Python工程师标准>>>

1. 文字溢出省略号显示

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

2. 文字换行

/*强制不换行*/
white-space:nowrap;
/*自动换行*/
word-wrap: break-word;
word-break: normal;
/*强制英文单词断行*/
word-break:break-all;

3. 画三角形

width: 0; 
height: 0; 
border-style: solid; 
border-width: 0 100px 100px 100px; 
border-color: transparent transparent #f00 transparent;

4. 强制出现滚动条

html{  height: 101%;}

5. 清除浮动

.clearfix{*zoom: 1;}
.clearfix{overflow:hidden;_zoom:1;}
.clearfix:after{clear:both;display:table;content:"”;}

6. 给div实现透明效果，支持ie7+

opacity: 0.5; 
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

7.去掉Webkit(chrome)浏览器中input(文本框)或textarea的黄色焦点框

input,button,select,textarea{ outline:none;}
textarea{ resize:none;}

8.去掉chrome记住密码后自动填充表单的黄色背景

input : -webkit-autofill {
    background-color : #FAFFBD ;
    background-image : none ;
    color : #000 ;
}

9.min-height: 最小高度兼容代码

min-height:500px;height:auto !important;height:500px;overflow:visible;

10.placeholder占位符颜色自定义

input:-moz-placeholder { color: #369; }

::-webkit-input-placeholder { color:#369; }

11.焦点去除背景

-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

-webkit-tap-highlight-color: transparent;  
// i.e. Nexus5/Chrome and Kindle Fire HD 7

12.手机版本网页a标记虚线框问题

a:focus { outline:none; -moz-outline:none; }

13.输入框聚焦发光效果

input[type=text],
textarea{
     -webkit-transition: all 0.30s ease-in-out;
     -moz-transition: all 0.30s ease-in-out;
     -ms-transition: all 0.30s ease-in-out;
     -o-transition: all 0.30s ease-in-out;
     outline: none;
     border: 1px solid #ddd;
}

input[type=text]:focus, 
textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    border: 1px solid rgba(81, 203, 238, 1);
}

转载于:https://my.oschina.net/oschinaindex/blog/514351