css中一些常用技巧

// css中引入字体文件
@font-face {
    font-family: msyh; /*这里是说明调用来的字体名字*/
    src: url('../font/wryh.ttf'); /*这里是字体文件路径*/
}
*{
    font-family: wryh.ttf;
} 

 去掉select的小三角

    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari 和 Chrome */

select::-ms-expand { display: none; } //清除ie的默认选择框样式清除，隐藏下拉箭头

 

background 属性

body{ background: url(bgimage.gif) scroll transparent; }
//background:transparent。意思就是背景透明
//background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
//scroll：默认值。背景图像会随着页面其余部分的滚动而移动。
//fixed：当页面的其余部分滚动时，背景图像不会移动。

 首行缩进

text-indent：5px; // 属性规定文本块中首行文本的缩进。
//注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。

 css设置文字不换行，超过的部分用“...”代替

//设置文字不换行，超过的部分用“...”代替
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 200px;
//除width属性外，顺序不要颠倒哦！
// 必须放在一个块元素内，而且这些属性都是加给该块元素的，例如：放在一个td 内，则需要在td内在添加一个块元素，否则无效。

 prototype属性可以向对象添加属性和方法

object.prototype.name=value;

 box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。

//为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

  //通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

 outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

p{
  outline:#00FF00 dotted 3px;
  }

//可以按顺序设置如下属性：
outline-color
outline-style
outline-width

 @keyframes(关键帧) ,后面是一系列动画规则

//@keyframes animationname {keyframes-selector {css-styles;}}

 //通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

 // 在动画过程中，您能够多次改变这套 CSS 样式。 0% 是动画的开始时间，100% 动画的结束时间。

@keyframes mymove
{
0%   {top:0px;}
50%  {top:100px;}
100% {top:0px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
50%  {top:100px;}
100% {top:0px;}
}

@-webkit-keyframes mymove /* Safari 和 Chrome */
{
0%   {top:0px;}
50%  {top:100px;}
100% {top:0px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
50%  {top:100px;}
100% {top:0px;}
}

 opacity 设置元素的不透明级别，0为完全透明，1为完全不透明

 

rgba()

RGBA(R,G,B,A)
取值：
A：Alpha透明度。取值0~1之间。

说明：RGBA记法。
此色彩模式与RGB相同，只是在RGB模式上新增了Alpha透明度。

  设置input输入框为只读属性 ： readonly

 

textarea超出部分换行显示

 white-space:pre-wrap;
 white-space:-moz-pre-wrap;
 white-space:-o-pre-wrap;
 word-wrap:break-word;

 

`