常用css

小程序

  /* 圆角设置 */
  border-radius: 100%;

横纵布局属性

/* 横向 */
display: flex;flex-direction: row;

/*纵向*/
display:flex;flex-direction: column;

/*居中*/
 display: flex;
  justify-content: center;
  align-items: center;

/*固定布局*/
 position: fixed;

/*字体加粗*/
   font-weight: bold; 

/*文本首行缩进*/
  text-indent: 20rpx;
  text-align: left;

/*取消文本首行缩进*/
   text-indent: 0rpx;
  padding-left: 0rpx;
  text-align: left;

溢出文本处理

单行

    /*固定宽度*/
    width: 100rpx;
    /*超出部分隐藏*/
    overflow:hidden;
    /*不换行*/
    white-space:nowrap;
    /*添加...*/
    text-overflow:ellipsis;

多行

display: -webkit-box ;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2; 

-webkit-line-clamp:2;//这是设置显示的多少行。

-webkit-box-orient：vertical。

word-break：规定自动换行的处理方法。

文本缩进

  text-indent: 20rpx;

  text-align: left;

取消缩进

text-indent: 0rpx;
  padding-left: 0rpx;
  text-align: left;

阴影设置

Box Shadow
*   [Box Shadow(阴影)]
*   [Text Shadow(文本阴影)]
*   [Text Stroke(文本描边)和text-fill-color(文本填充色)]
*   [border-radius(圆角)]
*   [webkit内核的safari、 Chrome的Linear Gradients (线性渐变)]
*   [Firefox的Linear Gradients (线性渐变)]
*   [transform(变形)和transform-origin(变形原点)]