| <template> |
| <scroller> |
| <div class="container"> |
| <text class="radius box solid"></text> |
| <text class="topleft box solid"></text> |
| <text class="topright box solid"></text> |
| <text class="bottomleft box solid"></text> |
| <text class="bottomright box solid"></text> |
| <text>solid</text> |
| </div> |
| <div class="container"> |
| <text class="radius box dotted"></text> |
| <text class="topleft box dotted"></text> |
| <text class="topright box dotted"></text> |
| <text class="bottomleft box dotted"></text> |
| <text class="bottomright box dotted"></text> |
| <text class="dotted dottedLarge"></text> |
| <text>dotted</text> |
| </div> |
| <div class="container"> |
| <text class="radius box dashed"></text> |
| <text class="topleft box dashed"></text> |
| <text class="topright box dashed"></text> |
| <text class="bottomleft box dashed"></text> |
| <text class="bottomright box dashed"></text> |
| <text class="dashed dashedLarge"></text> |
| <text>dashed</text> |
| </div> |
| <div class="container"> |
| <text class="constrained1"></text> |
| <text class="constrained2"></text> |
| <text class="constrained1 dashed"></text> |
| <text class="constrained2 dashed" ></text> |
| <text class="constrained1 dotted" ></text> |
| <text class="constrained2 dotted" ></text> |
| <text>constrained</text> |
| </div> |
| <div class="container"> |
| <text class="radius differentWidth1"></text> |
| <text class="radius differentWidth2"></text> |
| <text class="radius differentWidth3"></text> |
| <text class="radius differentWidth4" ></text> |
| <text class="radius differentWidth5" ></text> |
| <text>different width</text> |
| </div> |
| <div class="container"> |
| <text class="borderClipping1"></text> |
| <text class="borderClipping2"></text> |
| <text class="borderClipping3"></text> |
| <text>border clipping</text> |
| </div> |
| <div class="container"> |
| <text class="boxShadow1"></text> |
| <text class="boxShadow2"></text> |
| <text class="boxShadow3"></text> |
| <text class="boxShadow4"></text> |
| <text test-id="test-text">box shadow</text> |
| </div> |
| <div class="container"> |
| <text class="transparent1"></text> |
| <text class="transparent2"></text> |
| <text class="transparent3"></text> |
| <text class="transparent4"></text> |
| <text>transparent</text> |
| </div> |
| <div class="container"> |
| <image class="box topleft" :src="img" @load="onload"></image> |
| <image class="box topright" :src="img" @load="onload"></image> |
| <image class="box bottomleft" :src="img" @load="onload"></image> |
| <image class="box bottomright" :src="img" @load="onload"></image> |
| <image class="box" :src="img" @load="onload"></image> |
| <image class="circle" :src="img" @load="onload"></image> |
| <text>image</text> |
| </div> |
| </scroller> |
| </template> |
| |
| <style> |
| .container { |
| flex-direction: row; |
| } |
| .box { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| background-color: #ccc; |
| border-width: 6px; |
| border-color: #f00; |
| } |
| /* the different border-radii styles defined in CSS3 */ |
| .radius { |
| border-radius: 20px; |
| } |
| .topleft { |
| border-top-left-radius: 20px; |
| } |
| .topright { |
| border-top-right-radius: 20px; |
| } |
| .bottomright { |
| border-bottom-right-radius: 20px; |
| } |
| .bottomleft { |
| border-bottom-left-radius: 20px; |
| } |
| .dottedLarge { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| background-color: #ccc; |
| border-width: 21px; |
| border-radius: 40px; |
| border-left-color: rgba(0,0,255,1); |
| border-bottom-color: rgba(0,128,0,0.5); |
| border-right-color: rgba(0,128,0,0.5); |
| border-top-color: #f00; |
| } |
| .dashedLarge { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| background-color: #ccc; |
| border-top-width: 19px; |
| border-bottom-width: 19px; |
| border-left-width: 38px; |
| border-right-width: 38px; |
| border-top-left-radius: 50px; |
| border-top-right-radius: 50px; |
| border-bottom-left-radius: 25px; |
| border-bottom-right-radius: 25px; |
| border-left-color: rgba(0,0,255,1); |
| border-right-color: #f00; |
| border-top-color: #f00; |
| border-bottom-color: #f00; |
| } |
| |
| /* the different border styles defined in CSS3 */ |
| .dotted { |
| border-style: dotted; |
| } |
| .dashed { |
| border-style: dashed; |
| } |
| .solid { |
| border-style: solid; |
| } |
| |
| .constrained1 { |
| width: 100px; |
| height: 40px; |
| border-width: 10px ; |
| border-color: #f00; |
| border-top-left-radius: 15px; |
| border-top-right-radius: 40px; |
| border-bottom-left-radius: 40px; |
| border-bottom-right-radius: 15px; |
| } |
| |
| .constrained2 { |
| width: 40px; |
| height: 100px; |
| margin-left: 10px; |
| border-width: 10px ; |
| border-color: #f00; |
| border-top-left-radius: 15px; |
| border-top-right-radius: 40px; |
| border-bottom-left-radius: 40px; |
| border-bottom-right-radius: 15px; |
| } |
| |
| .differentWidth1 |
| { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| border-color: #f00; |
| background-color: #ccc; |
| border-top-width: 10px; |
| border-right-width: 15px; |
| border-bottom-width: 20px; |
| border-left-width: 30px; |
| } |
| .differentWidth2 |
| { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| border-color: #f00; |
| background-color: #ccc; |
| border-top-width: 10px; |
| border-right-width: 25px; |
| border-bottom-width: 40px; |
| border-left-width: 25px; |
| } |
| .differentWidth3 |
| { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| border-color: #f00; |
| background-color: #ccc; |
| border-top-width: 10px; |
| border-right-width: 25px; |
| border-bottom-width: 10px; |
| border-left-width: 25px; |
| } |
| .differentWidth4 |
| { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| border-color: #f00; |
| background-color: #ccc; |
| border-top-width: 16px; |
| border-right-width: 4px; |
| border-bottom-width: 110px; |
| border-left-width: 32px; |
| } |
| .differentWidth5 |
| { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| border-color: #f00; |
| background-color: #ccc; |
| border-right-width: 50px; |
| border-top-width: 6px; |
| border-left-width: 6px; |
| border-bottom-width: 6px; |
| } |
| |
| .borderClipping1 { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| background-color: #ccc; |
| border-radius: 30px; |
| border-top-color: red; |
| border-top-width: 10px; |
| border-left-color: blue; |
| border-left-width: 10px; |
| border-right-color: green; |
| border-right-width: 30px; |
| border-bottom-color: yellow; |
| border-bottom-width: 30px; |
| } |
| .borderClipping2 { |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| background-color: #ccc; |
| border-top-width: 20px; |
| border-bottom-width: 20px; |
| border-left-width: 40px; |
| border-right-width: 40px; |
| border-top-left-radius: 50px; |
| border-top-right-radius: 50px; |
| border-bottom-left-radius: 25px; |
| border-bottom-right-radius: 25px; |
| border-left-color: rgba(0,0,255,1); |
| border-bottom-color: rgba(0,128,0,0.5); |
| border-right-color: rgba(0,128,0,0.5); |
| border-top-color: #f00; |
| } |
| .borderClipping3 { |
| background-color: #ccc; |
| width: 100px; |
| height: 100px; |
| margin: 2px; |
| border-width:10px; |
| border-radius: 50px; |
| border-top-right-radius: 0px; |
| border-bottom-left-radius: 0px; |
| border-left-color: rgba(0,0,255,1); |
| background-color: green; |
| border-top-width: 5px; |
| border-bottom-width: 5px; |
| border-left-width: 18px; |
| border-right-width: 0px; |
| border-top-color: #f00; |
| border-bottom-color: #f00; |
| } |
| |
| .boxShadow1 { |
| width: 100px; |
| height: 45px; |
| background-color: #000000; |
| border-top-left-radius: 30px; |
| border-top-right-radius: 30px; |
| box-shadow: 0px 0px 1px 1px #000000; |
| margin-top: 20px; |
| } |
| .boxShadow2 { |
| width: 100px; |
| height: 45px; |
| background-color: #000000; |
| box-shadow: 30px 15px 0px -10px lime; |
| border-bottom-right-radius: 50px; |
| margin:30px; |
| } |
| .boxShadow3 { |
| width: 100px; |
| height: 45px; |
| background-color: #000000; |
| box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.06); |
| border-bottom-right-radius: 50px; |
| margin:30px; |
| } |
| .boxShadow4 { |
| width: 100px; |
| height: 45px; |
| background-color: red; |
| box-shadow: 0px 0px 10px 0px green; |
| padding: 20px; |
| border-width: 5px; |
| } |
| |
| .circle { |
| width: 100px; |
| height: 100px; |
| border-width: 33px; |
| border-color: rgba(255, 0, 0, 0.5); |
| border-style: solid; |
| border-radius:50px; |
| } |
| .transparent1 { |
| width: 100px; |
| height: 100px; |
| border-width: 33px; |
| border-top-color: rgba(255, 0, 0, 0.5); |
| border-left-color: rgba(255, 0, 0, 0.5); |
| border-bottom-color: rgba(255, 0, 0, 0.5); |
| border-style: solid; |
| border-radius:50px; |
| border-right-color: transparent; |
| } |
| .transparent2 { |
| width: 100px; |
| height: 100px; |
| border-width: 33px; |
| border-top-color: rgba(255, 0, 0, 0.5); |
| border-left-color: rgba(255, 0, 0, 0.5); |
| border-bottom-color: rgba(255, 0, 0, 0.5); |
| border-style: solid; |
| border-radius:50px; |
| border-right-color: transparent; |
| } |
| .transparent3 { |
| width: 100px; |
| height: 100px; |
| border-top-width: 33px; |
| border-left-width: 33px; |
| border-right-width: 33px; |
| border-top-color: rgba(255, 0, 0, 0.5); |
| border-left-color: rgba(255, 0, 0, 0.5); |
| border-style: solid; |
| border-radius:50px; |
| border-right-color: transparent; |
| border-right-width: 0; |
| border-bottom-color: transparent; |
| border-bottom-width: 0; |
| } |
| .transparent4 { |
| width: 100px; |
| height: 100px; |
| border-top-width: 33px; |
| border-left-width: 33px; |
| border-bottom-width: 33px; |
| border-top-color: rgba(255, 0, 0, 0.5); |
| border-left-color: rgba(255, 0, 0, 0.5); |
| border-style: solid; |
| border-radius:50px; |
| border-right-color: transparent; |
| border-right-width: 0; |
| border-bottom-color: transparent; |
| } |
| </style> |
| |
| <script> |
| module.exports = { |
| data : function(){ |
| return { |
| img: 'http://gw.alicdn.com/tfs/TB1bg8SQFXXXXcHXXXXXXXXXXXX-85-170.png' |
| } |
| }, |
| methods : { |
| onload: function(){ |
| console.log("image onload") |
| } |
| } |
| } |
| </script> |