shangshang
/
hhqtest


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <link rel="stylesheet" href="../style/weui.css"/>
  <link rel="stylesheet" href="../style/weui2.css"/>
  <link rel="stylesheet" href="../style/weui3.css"/>
      <script src="../zepto.min.js"></script>
      <script>
  $(function(){

	  
	  });    
      
      </script>
</head>

<body ontouchstart class="page-bg">
<div class="page-hd">
        <h1 class="page-hd-title">
            图片效果
        </h1>
        <p class="page-hd-desc"></p>
    </div>
<div class="page-hd">
<div class="weui-label-list">
                <label class="weui-label">王宝宝</label><label class="weui-label">李太白</label>
                <label class="weui-label">赵敏值</label><label class="weui-label">都大佑</label>
            </div>
            <div class="weui-label-list">
                <label class="weui-label-s">金庸</label> <label class="weui-label-s">梁羽生</label>
                <label class="weui-label-s">古龙</label> <label class="weui-label-s">卧龙生</label>
            </div>  


<h4>.weui-img-box图片盒子<h4>
<div class="weui-img-box" >
 <div class="weui-img" style="background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAGFBAMAAADzwA07AAAAIVBMVEXr6+vPz8/X19fp6ene3t7k5OTm5ubh4eHT09Pb29vR0dHqLrSfAAACyklEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGB27GdHaSiO4vgJ5e+s5lzAFlZ2Y1yWoIm6AjPJbItG3VJdmLiiOg9Aow8AybinK1/Tey9ldDttl+eTFC6w+4b+2luRNi2XcIJl8v/H6quHhf9BHiXnFlbGE6wep/D8+gm8Dp8CnEAeJePOBz4n7XKssi254gFWzEkVUWVb0uEeVklz7rxS2ZYM/PnfZ8zEz4atyrYkYOjn63emAPI5VLYtxczHe+HnbWxc7K9fVLYFxwjAIur5eVuGQLcgn6lsczkTYDNDOQb6Nma/oJWqbGMLV/EYIg6BAffIaG5iTlW2sSFXQDFGblzDAwqTIIi5VdmmRrZbYI/F3FXeDbj3uQ8q29SA1/ZYYcgtFkzeMAXQ50llmwo4RYcpRlwhj5DN4RShyjZWTHA1Bwa233Fm435w4onKNnY0yAwQ8BrFFGuezVS2sc0c6xBAPA04Rswz8+9Z7VBl61lwG48BrCd+IEQ33i36DB8eNKpsHUP+KPcAMuMvYgYXnFzS71S2jhF/8+D/mq+YIotwURh4GVOVraPHXy4dOsznfrNb3XUh9kv3nqhsHQEjlw5dFsa97qudAnK/RI8GKltLTANfkyEQlFECfOMBGDFKAaw5Vtl61lW1wifMaW7fMkpcZJr7u+fkTmXr2VRbgqM/+3slrZ+wPtP7A5WtZ8FTVfgA63VhYyZw3tGaJSrbkuDTe1Re3t1/hIiIiIiIiIiIiIj8ZQ8OBAAAAACA/F8bQVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVpT04JAAAAAAQ9P+10RMAAAAAAAAAAAAAAADAArTtXKLPR7LcAAAAAElFTkSuQmCC);"></div>
   <div class="weui-img-masker"> 
   <div class="weui-img-title" > 我们都是好孩子,最最可爱的孩子<br> <span class="weui-img-time">2016-10-18</span> 
   </div>
    </div> 
    </div>
    
    
<h4>.img-border边框 .img-max自动缩放<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAGFBAMAAADzwA07AAAAIVBMVEXr6+vPz8/X19fp6ene3t7k5OTm5ubh4eHT09Pb29vR0dHqLrSfAAACyklEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGB27GdHaSiO4vgJ5e+s5lzAFlZ2Y1yWoIm6AjPJbItG3VJdmLiiOg9Aow8AybinK1/Tey9ldDttl+eTFC6w+4b+2luRNi2XcIJl8v/H6quHhf9BHiXnFlbGE6wep/D8+gm8Dp8CnEAeJePOBz4n7XKssi254gFWzEkVUWVb0uEeVklz7rxS2ZYM/PnfZ8zEz4atyrYkYOjn63emAPI5VLYtxczHe+HnbWxc7K9fVLYFxwjAIur5eVuGQLcgn6lsczkTYDNDOQb6Nma/oJWqbGMLV/EYIg6BAffIaG5iTlW2sSFXQDFGblzDAwqTIIi5VdmmRrZbYI/F3FXeDbj3uQ8q29SA1/ZYYcgtFkzeMAXQ50llmwo4RYcpRlwhj5DN4RShyjZWTHA1Bwa233Fm435w4onKNnY0yAwQ8BrFFGuezVS2sc0c6xBAPA04Rswz8+9Z7VBl61lwG48BrCd+IEQ33i36DB8eNKpsHUP+KPcAMuMvYgYXnFzS71S2jhF/8+D/mq+YIotwURh4GVOVraPHXy4dOsznfrNb3XUh9kv3nqhsHQEjlw5dFsa97qudAnK/RI8GKltLTANfkyEQlFECfOMBGDFKAaw5Vtl61lW1wifMaW7fMkpcZJr7u+fkTmXr2VRbgqM/+3slrZ+wPtP7A5WtZ8FTVfgA63VhYyZw3tGaJSrbkuDTe1Re3t1/hIiIiIiIiIiIiIj8ZQ8OBAAAAACA/F8bQVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVpT04JAAAAAAQ9P+10RMAAAAAAAAAAAAAAADAArTtXKLPR7LcAAAAAElFTkSuQmCC" class="img-border img-max">

<h4>.img-border .img-max .img-radius圆角<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAGFBAMAAADzwA07AAAAIVBMVEXr6+vPz8/X19fp6ene3t7k5OTm5ubh4eHT09Pb29vR0dHqLrSfAAACyklEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGB27GdHaSiO4vgJ5e+s5lzAFlZ2Y1yWoIm6AjPJbItG3VJdmLiiOg9Aow8AybinK1/Tey9ldDttl+eTFC6w+4b+2luRNi2XcIJl8v/H6quHhf9BHiXnFlbGE6wep/D8+gm8Dp8CnEAeJePOBz4n7XKssi254gFWzEkVUWVb0uEeVklz7rxS2ZYM/PnfZ8zEz4atyrYkYOjn63emAPI5VLYtxczHe+HnbWxc7K9fVLYFxwjAIur5eVuGQLcgn6lsczkTYDNDOQb6Nma/oJWqbGMLV/EYIg6BAffIaG5iTlW2sSFXQDFGblzDAwqTIIi5VdmmRrZbYI/F3FXeDbj3uQ8q29SA1/ZYYcgtFkzeMAXQ50llmwo4RYcpRlwhj5DN4RShyjZWTHA1Bwa233Fm435w4onKNnY0yAwQ8BrFFGuezVS2sc0c6xBAPA04Rswz8+9Z7VBl61lwG48BrCd+IEQ33i36DB8eNKpsHUP+KPcAMuMvYgYXnFzS71S2jhF/8+D/mq+YIotwURh4GVOVraPHXy4dOsznfrNb3XUh9kv3nqhsHQEjlw5dFsa97qudAnK/RI8GKltLTANfkyEQlFECfOMBGDFKAaw5Vtl61lW1wifMaW7fMkpcZJr7u+fkTmXr2VRbgqM/+3slrZ+wPtP7A5WtZ8FTVfgA63VhYyZw3tGaJSrbkuDTe1Re3t1/hIiIiIiIiIiIiIj8ZQ8OBAAAAACA/F8bQVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVpT04JAAAAAAQ9P+10RMAAAAAAAAAAAAAAADAArTtXKLPR7LcAAAAAElFTkSuQmCC" class="img-border img-max img-radius">

<h4>.img-radius.img-max自动缩放<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArIAAAGFBAMAAADzwA07AAAAIVBMVEXr6+vPz8/X19fp6ene3t7k5OTm5ubh4eHT09Pb29vR0dHqLrSfAAACyklEQVR42uzBgQAAAACAoP2pF6kCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGB27GdHaSiO4vgJ5e+s5lzAFlZ2Y1yWoIm6AjPJbItG3VJdmLiiOg9Aow8AybinK1/Tey9ldDttl+eTFC6w+4b+2luRNi2XcIJl8v/H6quHhf9BHiXnFlbGE6wep/D8+gm8Dp8CnEAeJePOBz4n7XKssi254gFWzEkVUWVb0uEeVklz7rxS2ZYM/PnfZ8zEz4atyrYkYOjn63emAPI5VLYtxczHe+HnbWxc7K9fVLYFxwjAIur5eVuGQLcgn6lsczkTYDNDOQb6Nma/oJWqbGMLV/EYIg6BAffIaG5iTlW2sSFXQDFGblzDAwqTIIi5VdmmRrZbYI/F3FXeDbj3uQ8q29SA1/ZYYcgtFkzeMAXQ50llmwo4RYcpRlwhj5DN4RShyjZWTHA1Bwa233Fm435w4onKNnY0yAwQ8BrFFGuezVS2sc0c6xBAPA04Rswz8+9Z7VBl61lwG48BrCd+IEQ33i36DB8eNKpsHUP+KPcAMuMvYgYXnFzS71S2jhF/8+D/mq+YIotwURh4GVOVraPHXy4dOsznfrNb3XUh9kv3nqhsHQEjlw5dFsa97qudAnK/RI8GKltLTANfkyEQlFECfOMBGDFKAaw5Vtl61lW1wifMaW7fMkpcZJr7u+fkTmXr2VRbgqM/+3slrZ+wPtP7A5WtZ8FTVfgA63VhYyZw3tGaJSrbkuDTe1Re3t1/hIiIiIiIiIiIiIj8ZQ8OBAAAAACA/F8bQVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVpT04JAAAAAAQ9P+10RMAAAAAAAAAAAAAAADAArTtXKLPR7LcAAAAAElFTkSuQmCC" class="img-radius img-max">

<h4>.circle<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="circle" style="width:100px;height:100px;">


<h4>.circle .xz360<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="circle xz360" style="width:100px;height:100px;">
<h4>.blur<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="blur" style="width:100px;height:100px;">

<h4>.radius-lg<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="radius-lg" style="width:100px;height:100px;">
<h4>.radius-md<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="radius-md" style="width:100px;height:100px;">


<h4>.radius-sm<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="radius-sm" style="width:100px;height:100px;">
<h4>.radius<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="radius" style="width:100px;height:100px;">

<h4>.jb渐变<h4>
<div class="jb" style="width:100px;height:100px;"></div>
<h4>.bs边框阴影<h4>
<div class="bs" style="width:100px;height:100px;"></div>
<div style="height:100px;" class="ts f40">字体阴影</div>

<h4>.opacity<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="opacity" style="width:100px;height:100px;">
<h4>.opacity-0<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="opacity-0" style="width:100px;height:100px;">
<h4>.opacity-1<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="opacity-1" style="width:100px;height:100px;">

<h4>.weui-avatar<h4>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="weui-avatar">
<h4>认证头像<h4>
<div class="weui-avatar-circle">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC" class="weui-avatar-url">
<img class="weui-avatar-status" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAKvSURBVDiNjdVLbFRVHAbw373z6GNqC1oMomzsjLKwJipuTHxsTAWVsHGjYtQdbKpSXZC4cuEjPlhhmhhNICbsjCQkNbgwGNBElIRxQewQiBiIDRTLY1qnM3NdnLmd6WC1J7k5yTnn++53v/P/fzdKksQqxr7WvOv/DmZXWB9DL/J40fXKVhIGSnfhAGpYwDfdwOhfFG7VqB72189EeWaPU/ko7BR3c+sjJDXWPESm/xkc/i/CHpT9+mZJ5RNyQyRNsgNht36dKGZxjpHXGP1wGve31IK4Y96Ok2a+Lfl9P30byN4SSKNMeHJDYa1vA+f3M3OkhJMtbNypcMzi3JTT73D+AHGOaCV7E+rXiHuC+o072PQ2uaEtmEoV9rla5sxeMr0rkyVNGguMvE7PeuJswFwtB46OT05k+sMnidpKdPqbsDjLvXuConveon4jYDL9KWCJ8BWXjwYFKbhZozHfWouoXeLucUbGqV3m7CSZPpIGl47Cy6mH+9yo7PT9EwEYxTTr3PceSUR5PHi28SUe/Cy86IdtXPmR3FqSehDw6HcUip/ebFazTs867nyOuJfcAH8c5IHJsP/Lq8weIz/cYcmSNVGMXQrFQ4oToc7iHAsXODbG339yx3YePhjKprybi18tJ6tfozhBoXgIO1MPPzf8WIsfmQJzpzj+NNVzYe239zk3SX7d8suKMgw/Dl/Q7uVIoxo6IO2K3BqqZ/npedY/G9ovf1uXP0nANKrS8kgVzhscDTfYmG8bnR0MCqc/IFvQLinhTGMhYAZHA4d2p8TYhnfNHNnkxAuhwJfed9PNBbLNX3L7k6exB1+j2R0OvTilPFFyZu9qwqGCUR3hsHJ8XTlBnMbXx2Gn+EaIr2aNtZtXFV/peMqygJ3eAgZKU5YH7FQ3cCXC7rHqX8A/NW4G8HFjBmAAAAAASUVORK5CYII=">
</div>
<h4>认证头像<h4>
<div class="weui-avatar">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABZ0RVh0Q3JlYXRpb24gVGltZQAxMC8wMy8xNjC63GQAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzbovLKMAAABsElEQVR4nO3aUU6EQBAG4R/jWTyC3v/RI+hl9Amzi7BGwzrVPVUHIIQvPU0Cy/NbPmKYHkbfgF0nCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAeR99AtV6f9r/nvbwvp1xfkBsdPfx7JsimEQiXuUNgCQJLkBM6a6En7pBvXT7cEfvECTlo1HIXZKffYJx5XCUeWVeNfuVNnJCvfsI4exKOEiR/x7gH0vQglMlYW2b++/0Wxn9DrE07IUSMZMK3LNoRtW2qCaFjJBOBVMBIJgGpgpFMsEOoy/uo1hNSDSNpDFIRI2l4ZFXaF3u1mpDqGEkjkA4YSROQLhhJgx1SdXkfVXpCumEkRSek0xG1rdyEdMZIioF0x0gKgcyAkRTdIZd1gVgrMyF7dcNICoN0xEgm/+uEWNkJ6ZogsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYgsASBJYgsASBJQgsQWAJAksQWILAEgSWILAEgSUILEFgCQJLEFiCwBIEliCwBIElCCxBYAkCSxBYn92PXxigvPifAAAAAElFTkSuQmCC">
<img class="weui-avatar-status" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAKvSURBVDiNjdVLbFRVHAbw373z6GNqC1oMomzsjLKwJipuTHxsTAWVsHGjYtQdbKpSXZC4cuEjPlhhmhhNICbsjCQkNbgwGNBElIRxQewQiBiIDRTLY1qnM3NdnLmd6WC1J7k5yTnn++53v/P/fzdKksQqxr7WvOv/DmZXWB9DL/J40fXKVhIGSnfhAGpYwDfdwOhfFG7VqB72189EeWaPU/ko7BR3c+sjJDXWPESm/xkc/i/CHpT9+mZJ5RNyQyRNsgNht36dKGZxjpHXGP1wGve31IK4Y96Ok2a+Lfl9P30byN4SSKNMeHJDYa1vA+f3M3OkhJMtbNypcMzi3JTT73D+AHGOaCV7E+rXiHuC+o072PQ2uaEtmEoV9rla5sxeMr0rkyVNGguMvE7PeuJswFwtB46OT05k+sMnidpKdPqbsDjLvXuConveon4jYDL9KWCJ8BWXjwYFKbhZozHfWouoXeLucUbGqV3m7CSZPpIGl47Cy6mH+9yo7PT9EwEYxTTr3PceSUR5PHi28SUe/Cy86IdtXPmR3FqSehDw6HcUip/ebFazTs867nyOuJfcAH8c5IHJsP/Lq8weIz/cYcmSNVGMXQrFQ4oToc7iHAsXODbG339yx3YePhjKprybi18tJ6tfozhBoXgIO1MPPzf8WIsfmQJzpzj+NNVzYe239zk3SX7d8suKMgw/Dl/Q7uVIoxo6IO2K3BqqZ/npedY/G9ovf1uXP0nANKrS8kgVzhscDTfYmG8bnR0MCqc/IFvQLinhTGMhYAZHA4d2p8TYhnfNHNnkxAuhwJfed9PNBbLNX3L7k6exB1+j2R0OvTilPFFyZu9qwqGCUR3hsHJ8XTlBnMbXx2Gn+EaIr2aNtZtXFV/peMqygJ3eAgZKU5YH7FQ3cCXC7rHqX8A/NW4G8HFjBmAAAAAASUVORK5CYII=">
</div>

</div></body>
</html>