square及rectangle图形基本训练

蓝图参考:http://vue.dshow.net/Axure/Exe01/index.html#id=z0ttia&p=%E7%BB%83%E4%B9%A01

正方形:

<template>
    <div class="square">
        练习1<br/>正方形制作格码老师<br/>创作
    </div>
</template>
<style lang="scss" scoped>
.square {
    box-sizing: border-box;
    width: 600px;
    height:600px;
    border:50px solid red;
    background-color: blue;
    box-shadow: 5px 5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: '黑体';
    font-size:48px;
    padding-left: 120px;
    padding-right: 120px;
    text-shadow: 2px 2px 2px;
    color:white;
}
</style>

长方形:

<template>
<div class="outerrect">
    <div class="rect">
        练习1<br/>正方形制作格码老师<br/>创作
    </div> 
</div>
</template>
<style lang="scss" scoped>
.outerrect{
    width:460px;
    height: 660px;
    background-color: gray; 
    position:relative;
    
.rect{
    position: relative;
    left:60px;  
    top:60px; 
    box-sizing: border-box;
    width: 400px;
    height:600px;
    border:50px solid red;
    background-color: blue;
    box-shadow: 5px 5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: '黑体';
    font-size:48px;
    padding-left: 30px;
    padding-right: 30px;
    text-shadow: 2px 2px 2px;
    color:white;
}
}
</style>