11个css高级常见技巧汇总

1. 1. 设置 input 的 placeholder 的字体样式
2. 2. 单行和多行文本超出省略号
3. 3. 负边距使用技巧
4. 4. 定位同时设置方位情况
5. 5. 相邻兄弟选择器之常用场景
6. 6. outline 属性的妙用技巧
7. 7. 隐藏滚动条或更改滚动条样式
8. 8. 纯 CSS 绘制三角形
9. 9. 虚线框绘制技巧
10. 10. 卡券效果制作
11. 11. 隐藏文本的常用两种方法

1. 设置 input 的 placeholder 的字体样式

HTML 代码

<input type="text" placeholder="请设置用户名">

设置 input 占位符的样式

input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder { /* Firefox 19+ */  
  color: red;
}
input:-ms-input-placeholder { /* IE 10+ */
  color: red;
}
input:-moz-placeholder { /* Firefox 18- */
  color: red;
}

设置 input 聚焦时的样式

input:focus {   
  background-color: red;
}

取消 input 的边框

input{
  border: none;
  outline: none;
}

效果如下：

11. 隐藏文本的常用两种方法

text-indent: -9999px; 或者 font-size: 0;

HTML 代码

<h1>
  <a href="#" role="img" >淘宝网</a>
</h1>

CSS 代码

.logo {
 width: 190px;
  height: 80px;
  float: left;
  margin-top: 8px
}

.logo h1 {
  position: relative
}

.logo h1 .logo-bd {
  display: block;
  margin-left: 22px;
  padding-top: 58px;
  width: 142px;
  overflow: hidden;
  background: url(http://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png) 0 0 no-repeat;
  text-indent: -9999px;
}