css常用属性

1. 字体

• font-style : normal / italic / oblique ;  /* 字体样式 */
• font-size : num px;  /* 字体大小 */
• font-weight : normal / bold ; /*字体粗细 */
• text-decoration : normal / italic / oblique / bold / overline / underline / strikout ; /*  文本修饰 */

2. 间隔 

• line-height : num px ; /*  行高 */
• word-spacing : num px ; /*  字符间距 */ 
• letter-spacing : num px;  /*  字符间距 */

3. 转换

• text-transform : uppercase ;

4. 渐变  

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

• background: linear-gradient(direction, color-stop1, color-stop2, ...);  /*   css3线性渐变 - 从上到下（默认情况下）   */

  1 线性渐变 - 各浏览器支持格式
  2 background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  3 background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  4 background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  5 background: linear-gradient(red, blue); /* 标准的语法 */

  1 background: linear-gradient(red, blue); /* 线性渐变 - 从上到下（默认情况下） */
  2 background: linear-gradient(to right, red , blue); /* 线性渐变 - 从左到右 */
  3 background: linear-gradient(to bottom right, red , blue); /* 线性渐变 - 对角*/

• background: linear-gradient(angle, color-stop1, color-stop2);    /*  使用角度  */

  background: linear-gradient(180deg, red, blue); 

• background: repeating-linear-gradient(red, yellow 10%, green 20%);    /*  重复的线性渐变  */

  background: repeating-linear-gradient(red, yellow 10%, green 20%);

   

径向渐变（Radial Gradients）- 由它们的中心定义

• background: radial-gradient(derection, shape size, start-color, ..., last-color);    /*  css3径向渐变  */

  background: radial-gradient(red, green, blue);  /* 径向渐变 - 颜色结点均匀分布（默认情况下） */
  background: radial-gradient(red 5%, green 15%, blue 60%);  /* 径向渐变 - 颜色结点不均匀分布  */

• background: radial-gradient(shape , start-color, ..., last-color);  /* css3径向渐变设置形状  */  

  shape : circle / ellipse; (  circle:圆形；ellipse : 椭圆形[默认]  ）

  background: radial-gradient(circle, red, yellow, green); 

• background: repeating-radial-gradient();   /* css3重复径向渐变  */

  background: repeating-radial-gradient(red, yellow 10%, green 15%); 

• background: radial-gradient(derection, size, start-color, ..., last-color);   size : closest-side  / farthest-side / closest-corner / farthest-corner  ;(参数定义了渐变的大)

   background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);

box-sizing : border-box ; /* 要求对象的总宽总高除了包括content外还需包括padding和border*/

　　　　　: content-box  ;  /* 只要求对象的总宽总高包括content */

6. background-

•  background-clip : border-box / padding-box / content-box; 

 　　　　　　　     　  :背景被裁剪到哪个位置

　　　　　　　　　　: border-box ? 指定边框的外边框

　　　　　　　　　　: padding-box ? 指定空白区域外边缘

　　　　　　　　　　: border-box ? 指定内容区域外边缘

•  background-origin : border-box / padding-box / content-box; 

　　　　　　　　  　　   : 背景相对于什么定位，指定背景图片在左上角的开始位置

• background-size : w px    h px ; /*  背景大小*/

　　　　　　　  　　   : 100px auto ; /* 改变背景图片的一个尺寸，而让另一个尺寸自动保持相同比例*/

7. overflow 元素溢出

 overflow / overflow-x / overflow-y : hidden / visible / auto / scroll ;

8.column-  多栏布局

• column-count : num ; /*文本自然排成num列*/

　　　　　　　　  :width  style color ;

 10 . 网页字体

  @font-face{

font-family:name;

src(‘name.otf‘) format(‘opentype‘);

}