refactor(border): migrate css var & simplify docs

[YunYouJun]

• migrate --el-border-radius-#{$type} & --el-box-shadow-#{$type} css var
• add round of $--border-radius: 20px
• simplify border docs with border-box.vue, shadow-box.vue
  • use code beautify doc style

---

Please make sure these boxes are checked before submitting your PR, thank you!

• Make sure you follow Element's contributing guide English | (中文 | Español | Français).
• Make sure you are merging your commits to dev branch.
• Add some descriptions and refer to relative issues for your PR.

[element-bot]

[KawaiiZapic]

This PR breaks way to change theme color by changing scss variables $--primary-color.
The documentation doesn't keep up yet, I spent some time to find out how to change primary color.

$--colors: (
  (
    'primary': (
       'base': teal,
    )
  )
);
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index.scss";

[jw-foss]

This PR breaks way to change theme color by changing scss variables $--primary-color.
The documentation doesn't keep up yet, I spent some time to find out how to change primary color.

$--colors: (
  (
    'primary': (
       'base': teal,
    )
  )
);
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index.scss";

Yes, we are expecting the full migration in the week, and we do feel sorry for breaking the functionalities. Sorry for wasting your time. We will complete the migration this week and update the documentation properly.

[YunYouJun]

Sorry, the migration document is not ready yet because the overall migration work has not been completed.
We will provide migration guideline and examples when everything is done.
For more updates you can subscribe to this Issue.

#2242

And here to see all migration about css var.

https://github.com/element-plus/element-plus/pulls?q=label%3A%22css+migration%22

---

You can use --el-color-primary: xxx to custom primary color.