写css之前先清除页面样式、@media screen、@font-face、修改input框内提示文字默认颜色、css写实体三角形

//开始写css之前先清除页面样式

*{margin: 0px;padding: 0px;}

//@media screen判断屏幕宽高适应不同分辨率

@media screen and (max-height:900px){
  xxx{top:70.6%;}
}

//@font-face引入文字

{
  font-family: STCAIYUN;
  src: url(../css/font/STCAIYUN.TTF);
}

//修改input框内提示文字默认颜色(placeholder字体颜色)

<input type="text" placeholder="我爱北京" value=" ">

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f00;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #f00;
}

//css写实体三角形(下面例子箭头方向为向左)

<div class="arrow">
  <em></em><span></span>
</div>

.-arrow{ position:absolute; 40px; height:40px; bottom:14px; left:-41px; transform:rotate(87deg);
  -ms-transform:rotate(87deg); /* IE 9 */
  -moz-transform:rotate(87deg); /* Firefox */
  -webkit-transform:rotate(87deg); /* Safari 和 Chrome */
  -o-transform:rotate(87deg); /* Opera */}
.arrow *{ display:block; border-14px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; }
.arrow em{border-color:#bfb702 transparent transparent;}
.arrow span{border-color:#fffc00 transparent transparent; top:-3px;}

原文地址:https://www.cnblogs.com/Cloudloong/p/9562968.html