常用方法

overflow

如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。hidden是隐藏。
可能用到的值：

rgba调色

(0,0,0,0.5)
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
取值：
：Hue(色调)。 0(或360)表示红色，120表示绿色，240表示蓝色，当然可取其他数值来确定其它颜色；
：Saturation(饱和度)。 取值为0%到100%之间的值；
：Lightness(亮度)。 取值为0%到100%之间的值；
：alpha(透明度)。 取值在0到1之间；

text-shadow: 0 1px 1px rgba(0,0,0,0.8)

给文字添加阴影效果 4个值的含义分别是：
0：阴影水平偏移值（可取正负值）；
1px：阴影垂直偏移值（可取正负值）；
1px：阴影模糊值；
rgba(0,0,0,0.8)：阴影颜色；
顺序不可以颠倒 值可以随便改 只能用在文字上。如果想用在容器上
要用box-shadow:0 1px 1px rgba(0,0,0,0.8)
text-shadow:1px 2px 3px 4px #333，4 个数值的含义，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径
text-shadow可以实现多阴影
text-shadow多阴影：blog.net/KimBing/article/details
多阴影：jc2182.com/css-shadow
多层阴影：cnblogs.com/coco1s/p
50层阴影:SCSS代码

@function makeLongShadow($color) {
    $val: 0px 0px $color;
    @for $i from 1 through 50 {
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }
    @return $val;
}
div {
    text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}

改进后的

@function makelongrightshadow($color) {
    $val: 0px 0px $color; 
    @for $i from 1 through 50 {
        $color: fade-out(desaturate($color, 1%), .02);
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }
    @return $val;
}

SCSS转换成CSS

div {
      text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px #992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px 10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px 15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px 20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px 25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px 30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px 35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px 40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px 45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px 50px #992400;
}

box-shadow

box-shadow: 1px 2px 3px 4px #333，4 个数值的含义，x 方向偏移值、y 方向偏移值 、模糊半径、扩张半径
box-shadow: 1px 2px 3px #333，3个数值的含义，x 方向偏移值、y 方向偏移值 、模糊半径
box-shadow不能实现多阴影
box-shadow内外阴影：.im/post
box-shadow效果展示：.cn/archives/9360
box-shadow技巧细节：cnblogs.com/coco1s/p

justify-content（在父元素设置）

设置弹性盒子元素在主轴（横轴）的对齐方式。
取值：
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start: 弹性盒子元素将向行起始位置对齐。第一个元素与左起始边界对齐，后面元素接着第一个元素进行排列。
flex-end: 弹性盒子元素将向行结束位置对齐。整体靠着行结束的位置排列。
center：整体居中显示。
space-between: 弹性盒子元素均匀分布。第一个元素的边界与行的主起始位置的边界对齐，同时最后一个元素的边界与行的主结束位置的边距对齐，而剩余的伸缩盒项目则平均分布，并确保两两之间的空白空间相等。
space-around: 弹性盒子元素均匀分布。两端保留子元素与子元素之间间距大小的一半

align-items

取值：

• align-items 和 align-content的区别：align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,而在我们日常开发中用的比较多的就是align-items.

  position: relative;z-index: 999;

  z-index属性设置元素的堆叠顺序：拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。所以，z-index: 999表示某个元素的显示在前面的优先级参数为999。注意：

1. 参数越大，表示越会显示在其他堆叠元素之上。
   
2. z-index仅能在定位元素上有效（例如 position:absolute;）

注意：z-index 必须在position配置下才有效。
position和z-index资源:深入理解
position可以为relative(相对定位,)、absolute（绝对定位）、fixed(固定位置)，inherit（继承父级特性）然后通过top、right、bottom、left来进行控制。relative是相对于原来的位置进行控制。absolute和fixed都是相对于文本的左上角进行定位。如果父级用了relative,则absolute是相对于父级进行的。

如果没有加position时使用z-index是没有效果的，那么层级关系就会错乱，出现不想要得到的效果。

文字自动换行

blog.csdn.net/：style=’white-space:pre-line;’

透明度

• 透明度

opacity:0.8;(0-1,越大表示透明度越低)

index.js

import Taro, { Component } from '@tarojs/taro'
import { View,Text ,Image,Swiper, SwiperItem} from '@tarojs/components'
import './index.scss'
const data = [
  {
    url: 'http://placekitten.com/g/400/400',
    title: '还记得当初是因为什么而努力吗？仔细回想把它找回来把',
    color:'white'
  },
  {
    url: 'http://placekitten.com/700/700',
    title: 'Make '
  },
  {
    url: 'http://placekitten.com/800/800',
    title: 'Make '
  }
]
export default class Swip extends Component {
  render() {
    return ( 
      <View className='at-row swip'>
        <View className='at-col'>
          <Swiper className='test-h' indicatorColor='#999' indicatorActiveColor='#333'  indicatorDots autoplay>
          {
            data.map(item => (
              <SwiperItem ><View><Image className='lm' src={item.url} mode='widthFix' ></Image><Text className='child'  style='white-space:pre-line;position:absolute;left: 3%;top:200rpx;text-align:center;color:white;'>{item.title} </Text></View></SwiperItem>     
            ))
          }
          </Swiper>
          </View> 
      </View>
    )
  }
}

index.scss

.swip {
    .lm {
        box-shadow:0 3rpx 5rpx 1rpx lightgray;
        border-radius: 12rpx;
        margin: 20rpx;
        width:95%;
        max-height: 300rpx;       
    }
    .child{    
        width:94%;
        height: 40%;
        background: rgb(82, 81, 81);
        opacity:0.8;
    }
}

• 只改变父元素透明度，不改变子元素透明度

给元素加透明度时，通常写法为：opacity:0.5,filter:alpha(opacity=50);
我们通常也会遇到，在给父元素背景设置透明度时，子元素内容继承了父元素的透明度。
如何让子元素脱离父元素的透明度？有如下几种方法：
1.父元素div，直接使用透明度的图片做背景。
2.父元素div（设置为相对定位），兄弟div1（设置为绝对定位）背景正常加透明度即可，兄弟div2（设置为绝对定位），层级关系高于div1即可。
3.利用CSS3属性rgba（即red+green+blue+alpha的颜色），例如background-color:rgba(0,0,0,0.5)
但是IE7/8不支持此属性，可按如下方法写：
父元素div要写如下：background-color: rgba(0,0,0,0.5)!important;background-color: #000;filter:Alpha(opacity=50);
子元素div加个定位position:absolute/relative即可。

渐变色

background:linear-gradient(blue,red);

字体大小

font-size:20rpx;

transition

www.com/p/：动画平滑过渡/贝塞尔曲线

ActivityIndicator

https://.com/p/ebbc：动画的加载

scroll-view-animation

https://.com/p/c63c：动画的滑动效果 scroll-with-animation=’true’