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>

Element-UI学习之旅-Border边框及图标相关推荐

Element UI学习记录之布局
目录 Element UI学习记录之布局一.Layout布局二.Container布局容器 Element UI学习记录之布局一.Layout布局基本概念:一行通过分割为24栅格栏进行布局,如 ...
Element Ui 学习笔记(部分)
border-radius 边界半径 margin-bottom 页边距底部 grid-content 网格内容 min-height 最小高度 padding 凑篇幅的文字 gutter 檐沟(属性 ...
Element UI学习6--Carousel 走马灯
轮播是前端页面运用的比较广泛的一个功能. 在有限空间内,循环播放同一类型的图片.文字等内容. 今天主要学习了Element UI中Carousel 走马灯这一功能的使用方法. 1.基础用法 1.默认 ...
element UI 学习
记录下,自己搭建这个网站(古典小说网) 初始elementUI版本的过程目录一.搭建环境 1.引入JS .CSS 2.VUE 二.布局三.导航 1.参考官网导航介绍,设置自己的导航 2.发现有 ...
Element UI 中 el-input 标签去掉边框的一种办法
最近在做一个简单的页面,想把 el-input 去掉边框,在网上找了很多方法,最终发现下边这种方法是可行的: HTML代码: <el-input v-model="input" ...
element ui Drawer 抽屉标题有边框的问题
.el-drawer{:focus{outline:0;} }
Element UI学习4--NavMenu 导航菜单
1.顶栏导航菜单默认为垂直模式,通过mode属性可以使导航菜单变更为水平模式. 在菜单中通过submenu组件可以生成二级菜单. <tamplate> <div> <e ...
vue element UI 学习总结笔记（九）_ 导航菜单与路由
获取用户信息我们把 login和get_user_info两件事分开处理,我们在守卫路由中获取路由信息. router.beforeEach((to, from, next) => {if ( ...
vue中element ui 中tree组件怎么自定义前缀图标呢?
一问题饿了么ui 默认的图标样式是: 1. 一个箭头, 展开自动顺时针旋转90°, 以上的条件是该节点有子节点, 2. 如果是没有子节点的节点, 是默认空白图标的(这里我认为他不是没有, 而是有占 ...

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

Border 边框

border主要有三个属性

border总结

图标

如何设置图标的大小

Element-UI学习之旅-Border边框及图标相关推荐

最新文章

热门文章