CSS填坑代码大全 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); }

【CSS填坑代码大全】转载于:https://my.oschina.net/oschinaindex/blog/514351