Element-UI学习之旅-Border边框及图标

你能获得什么？

     如何设置Border边框，如何使用icon图标，了解到Element-ui字体和颜色的知识

Border 边框

  我们对边框进行统一规范，可用于按钮、卡片、弹窗等组件里。

border主要有三个属性

• border的边框样式，solid(实线)和 dashed(虚线) ，使用方法为：

	<div style="border: solid 1px red">
      这是一个DIV 实线
    </div>
    <div style="border: dashed 1px red">
      这是一个DIV 虚线
    </div>

效果如图：

• border的半径属性，通常用这个属性来设置圆角矩形

    <div style="border:solid;border-radius: 30px">
       这是一个div  加了半径
   </div>

• border的阴影属性，通常通过这个设置div阴影效果

	 <div style="margin-left: 40px;box-shadow: 12px 12px 12px rgba(0,0,0,0.1)">
      这是一个div，加了阴影效果
    </div>

border总结

    border的主要属性：

•      solid 和 dashed用于设置边框样式
•      radius 用于设置圆角矩形radius值越大 矩形弯曲的越厉害
•      box-shadow可以用于生成阴影效果，box-shadow用法如下：box-shadow: h-shadow v-shadow blur spread color inset;

图标

   element-ui提供了一套常用的图标集合。使用方法直接通过设置类名为 el-icon-iconName 来使用即可。例如：

<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" 
 icon="el-icon-search">搜索</el-button>

效果如图：          搜索

在element-ui用法较为简单，只要设置对应修饰元素的 class属性为对应的 el-icon-图标类型即可,对应图标类型可以从Element-UI官网进行查询。

如何设置图标的大小

使用图标的方法很简单，但是如何改变图标的大小呢？
    可以通过设置 font-size进行图标大小的设置
效果如图：

 <i style="font-size: 100px" class="el-icon-message" title="消息"></i>