1. Color色彩

1.1. Element為了避免視覺傳達差異, 使用一套特定的調色板來規定顏色, 為你所搭建的產品提供一致的外觀視覺感受。

2. 主色

2.1. Element主要品牌顏色是鮮艷、友好的藍色。

3. 輔助色

3.1. 除了主色外的場景色, 需要在不同的場景中使用(例如危險色表示危險的操作)。

4. 中性色

4.1. 中性色用于文本、背景和邊框顏色。通過運用不同的中性色, 來表現層次結構。

?

5. Color色彩例子

5.1. 使用腳手架新建一個名為element-ui-color的前端項目, 同時安裝Element插件。

?

5.2. 編寫App.vue?

<template><div id="app"><h1>主色</h1><span class="elementColor brand">Brand Color<br />#409EFF</span><h1>輔助色</h1><span class="elementColor success">Success<br />#67C23A</span><span class="elementColor warning">Warning<br />#E6A23C</span><span class="elementColor danger">Danger<br />#F56C6C</span><span class="elementColor info">Info<br />#909399</span><h1>中性色</h1><span class="elementColor importText">主要文字<br />#303133</span><span class="elementColor oneBorder">一級邊框<br />#DCDFE6</span><span class="elementColor baseBlack">基礎黑色<br />#000000</span><br /><span class="elementColor normalText">常規文字<br />#606266</span><span class="elementColor twoBorder">二級邊框<br />#E4E7ED</span><span class="elementColor baseWhite">基礎白色<br />#FFFFFF</span><br /><span class="elementColor secondaryText">次要文字<br />#909399</span><span class="elementColor thirdBorder">三級邊框<br />#EBEEF5</span><span class="elementColor transparent">透明<br />Transparent</span><br /><span class="elementColor seatText">占位文字<br />#C0C4CC</span><span class="elementColor fourBorder">四級邊框<br />#F2F6FC</span></div> </template><style>.elementColor {display: inline-block;width: 200px;height: 60px;color: #fff;padding: 20px;}.brand {background-color: #409EFF;}.success {background-color: #67C23A;}.warning {background-color: #E6A23C;margin-left: 10px;}.danger {background-color: #F56C6C;margin-left: 10px;}.info {background-color: #909399;margin-left: 10px;}.importText {background-color: #303133;}.oneBorder {background-color: #DCDFE6;color: black;margin-left: 10px;}.baseBlack {background-color: #000000;margin-left: 10px;}.normalText {background-color: #606266;}.twoBorder {background-color: #E4E7ED;color: black;margin: 10px;}.baseWhite {background-color: #FFFFFF;border: 1px solid black;color: black;}.secondaryText {background-color: #909399;}.thirdBorder {background-color: #EBEEF5;color: black;margin: 10px;}.transparent {background-color: Transparent;border: 1px solid black;color: black;}.seatText {background-color: #C0C4CC;}.fourBorder {background-color: #F2F6FC;color: black;margin-left: 10px;} </style>

5.3. 運行項目

總結

以上是生活随笔為你收集整理的003_Color色彩的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。