赛元单片机触摸按键调节及避坑指南(以SC92F8461B的高灵敏触摸为例)
生活随笔
收集整理的這篇文章主要介紹了
赛元单片机触摸按键调节及避坑指南(以SC92F8461B的高灵敏触摸为例)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
- 前言
- 流程總覽
- 步驟說明
- 1.燒錄官方高靈敏hex文件
- 2.目標板連接電腦并選擇初始參數
- 3.參數調整
- 4.驗證相互間影響
- 5.將配置信添加到工程
- 6.靈活調整
- 總結
前言
項目中前前后后用到過好多次帶觸摸按鍵功能的賽元單片機，第一次使用時研究了好久的使用手冊。過了一段時間后，再次使用，便又忘了，寫下這篇文章，方便今后查閱和回顧。
本文以SC92F8461B，靜態調試高靈敏觸摸為例。
流程總覽
#mermaid-svg-df4CU48E5dnRhyev .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-df4CU48E5dnRhyev .label text{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .node rect,#mermaid-svg-df4CU48E5dnRhyev .node circle,#mermaid-svg-df4CU48E5dnRhyev .node ellipse,#mermaid-svg-df4CU48E5dnRhyev .node polygon,#mermaid-svg-df4CU48E5dnRhyev .node path{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-df4CU48E5dnRhyev .node .label{text-align:center;fill:#333}#mermaid-svg-df4CU48E5dnRhyev .node.clickable{cursor:pointer}#mermaid-svg-df4CU48E5dnRhyev .arrowheadPath{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .edgePath .path{stroke:#333;stroke-width:1.5px}#mermaid-svg-df4CU48E5dnRhyev .flowchart-link{stroke:#333;fill:none}#mermaid-svg-df4CU48E5dnRhyev .edgeLabel{background-color:#e8e8e8;text-align:center}#mermaid-svg-df4CU48E5dnRhyev .edgeLabel rect{opacity:0.9}#mermaid-svg-df4CU48E5dnRhyev .edgeLabel span{color:#333}#mermaid-svg-df4CU48E5dnRhyev .cluster rect{fill:#ffffde;stroke:#aa3;stroke-width:1px}#mermaid-svg-df4CU48E5dnRhyev .cluster text{fill:#333}#mermaid-svg-df4CU48E5dnRhyev div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:12px;background:#ffffde;border:1px solid #aa3;border-radius:2px;pointer-events:none;z-index:100}#mermaid-svg-df4CU48E5dnRhyev .actor{stroke:#ccf;fill:#ECECFF}#mermaid-svg-df4CU48E5dnRhyev text.actor>tspan{fill:#000;stroke:none}#mermaid-svg-df4CU48E5dnRhyev .actor-line{stroke:grey}#mermaid-svg-df4CU48E5dnRhyev .messageLine0{stroke-width:1.5;stroke-dasharray:none;stroke:#333}#mermaid-svg-df4CU48E5dnRhyev .messageLine1{stroke-width:1.5;stroke-dasharray:2, 2;stroke:#333}#mermaid-svg-df4CU48E5dnRhyev #arrowhead path{fill:#333;stroke:#333}#mermaid-svg-df4CU48E5dnRhyev .sequenceNumber{fill:#fff}#mermaid-svg-df4CU48E5dnRhyev #sequencenumber{fill:#333}#mermaid-svg-df4CU48E5dnRhyev #crosshead path{fill:#333;stroke:#333}#mermaid-svg-df4CU48E5dnRhyev .messageText{fill:#333;stroke:#333}#mermaid-svg-df4CU48E5dnRhyev .labelBox{stroke:#ccf;fill:#ECECFF}#mermaid-svg-df4CU48E5dnRhyev .labelText,#mermaid-svg-df4CU48E5dnRhyev .labelText>tspan{fill:#000;stroke:none}#mermaid-svg-df4CU48E5dnRhyev .loopText,#mermaid-svg-df4CU48E5dnRhyev .loopText>tspan{fill:#000;stroke:none}#mermaid-svg-df4CU48E5dnRhyev .loopLine{stroke-width:2px;stroke-dasharray:2, 2;stroke:#ccf;fill:#ccf}#mermaid-svg-df4CU48E5dnRhyev .note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-df4CU48E5dnRhyev .noteText,#mermaid-svg-df4CU48E5dnRhyev .noteText>tspan{fill:#000;stroke:none}#mermaid-svg-df4CU48E5dnRhyev .activation0{fill:#f4f4f4;stroke:#666}#mermaid-svg-df4CU48E5dnRhyev .activation1{fill:#f4f4f4;stroke:#666}#mermaid-svg-df4CU48E5dnRhyev .activation2{fill:#f4f4f4;stroke:#666}#mermaid-svg-df4CU48E5dnRhyev .mermaid-main-font{font-family:"trebuchet ms", verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .section{stroke:none;opacity:0.2}#mermaid-svg-df4CU48E5dnRhyev .section0{fill:rgba(102,102,255,0.49)}#mermaid-svg-df4CU48E5dnRhyev .section2{fill:#fff400}#mermaid-svg-df4CU48E5dnRhyev .section1,#mermaid-svg-df4CU48E5dnRhyev .section3{fill:#fff;opacity:0.2}#mermaid-svg-df4CU48E5dnRhyev .sectionTitle0{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .sectionTitle1{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .sectionTitle2{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .sectionTitle3{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .sectionTitle{text-anchor:start;font-size:11px;text-height:14px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .grid .tick{stroke:#d3d3d3;opacity:0.8;shape-rendering:crispEdges}#mermaid-svg-df4CU48E5dnRhyev .grid .tick text{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .grid path{stroke-width:0}#mermaid-svg-df4CU48E5dnRhyev .today{fill:none;stroke:red;stroke-width:2px}#mermaid-svg-df4CU48E5dnRhyev .task{stroke-width:2}#mermaid-svg-df4CU48E5dnRhyev .taskText{text-anchor:middle;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .taskText:not([font-size]){font-size:11px}#mermaid-svg-df4CU48E5dnRhyev .taskTextOutsideRight{fill:#000;text-anchor:start;font-size:11px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .taskTextOutsideLeft{fill:#000;text-anchor:end;font-size:11px}#mermaid-svg-df4CU48E5dnRhyev .task.clickable{cursor:pointer}#mermaid-svg-df4CU48E5dnRhyev .taskText.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-df4CU48E5dnRhyev .taskTextOutsideLeft.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-df4CU48E5dnRhyev .taskTextOutsideRight.clickable{cursor:pointer;fill:#003163 !important;font-weight:bold}#mermaid-svg-df4CU48E5dnRhyev .taskText0,#mermaid-svg-df4CU48E5dnRhyev .taskText1,#mermaid-svg-df4CU48E5dnRhyev .taskText2,#mermaid-svg-df4CU48E5dnRhyev .taskText3{fill:#fff}#mermaid-svg-df4CU48E5dnRhyev .task0,#mermaid-svg-df4CU48E5dnRhyev .task1,#mermaid-svg-df4CU48E5dnRhyev .task2,#mermaid-svg-df4CU48E5dnRhyev .task3{fill:#8a90dd;stroke:#534fbc}#mermaid-svg-df4CU48E5dnRhyev .taskTextOutside0,#mermaid-svg-df4CU48E5dnRhyev .taskTextOutside2{fill:#000}#mermaid-svg-df4CU48E5dnRhyev .taskTextOutside1,#mermaid-svg-df4CU48E5dnRhyev .taskTextOutside3{fill:#000}#mermaid-svg-df4CU48E5dnRhyev .active0,#mermaid-svg-df4CU48E5dnRhyev .active1,#mermaid-svg-df4CU48E5dnRhyev .active2,#mermaid-svg-df4CU48E5dnRhyev .active3{fill:#bfc7ff;stroke:#534fbc}#mermaid-svg-df4CU48E5dnRhyev .activeText0,#mermaid-svg-df4CU48E5dnRhyev .activeText1,#mermaid-svg-df4CU48E5dnRhyev .activeText2,#mermaid-svg-df4CU48E5dnRhyev .activeText3{fill:#000 !important}#mermaid-svg-df4CU48E5dnRhyev .done0,#mermaid-svg-df4CU48E5dnRhyev .done1,#mermaid-svg-df4CU48E5dnRhyev .done2,#mermaid-svg-df4CU48E5dnRhyev .done3{stroke:grey;fill:#d3d3d3;stroke-width:2}#mermaid-svg-df4CU48E5dnRhyev .doneText0,#mermaid-svg-df4CU48E5dnRhyev .doneText1,#mermaid-svg-df4CU48E5dnRhyev .doneText2,#mermaid-svg-df4CU48E5dnRhyev .doneText3{fill:#000 !important}#mermaid-svg-df4CU48E5dnRhyev .crit0,#mermaid-svg-df4CU48E5dnRhyev .crit1,#mermaid-svg-df4CU48E5dnRhyev .crit2,#mermaid-svg-df4CU48E5dnRhyev .crit3{stroke:#f88;fill:red;stroke-width:2}#mermaid-svg-df4CU48E5dnRhyev .activeCrit0,#mermaid-svg-df4CU48E5dnRhyev .activeCrit1,#mermaid-svg-df4CU48E5dnRhyev .activeCrit2,#mermaid-svg-df4CU48E5dnRhyev .activeCrit3{stroke:#f88;fill:#bfc7ff;stroke-width:2}#mermaid-svg-df4CU48E5dnRhyev .doneCrit0,#mermaid-svg-df4CU48E5dnRhyev .doneCrit1,#mermaid-svg-df4CU48E5dnRhyev .doneCrit2,#mermaid-svg-df4CU48E5dnRhyev .doneCrit3{stroke:#f88;fill:#d3d3d3;stroke-width:2;cursor:pointer;shape-rendering:crispEdges}#mermaid-svg-df4CU48E5dnRhyev .milestone{transform:rotate(45deg) scale(0.8, 0.8)}#mermaid-svg-df4CU48E5dnRhyev .milestoneText{font-style:italic}#mermaid-svg-df4CU48E5dnRhyev .doneCritText0,#mermaid-svg-df4CU48E5dnRhyev .doneCritText1,#mermaid-svg-df4CU48E5dnRhyev .doneCritText2,#mermaid-svg-df4CU48E5dnRhyev .doneCritText3{fill:#000 !important}#mermaid-svg-df4CU48E5dnRhyev .activeCritText0,#mermaid-svg-df4CU48E5dnRhyev .activeCritText1,#mermaid-svg-df4CU48E5dnRhyev .activeCritText2,#mermaid-svg-df4CU48E5dnRhyev .activeCritText3{fill:#000 !important}#mermaid-svg-df4CU48E5dnRhyev .titleText{text-anchor:middle;font-size:18px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev g.classGroup text{fill:#9370db;stroke:none;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);font-size:10px}#mermaid-svg-df4CU48E5dnRhyev g.classGroup text .title{font-weight:bolder}#mermaid-svg-df4CU48E5dnRhyev g.clickable{cursor:pointer}#mermaid-svg-df4CU48E5dnRhyev g.classGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-df4CU48E5dnRhyev g.classGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev .classLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.5}#mermaid-svg-df4CU48E5dnRhyev .classLabel .label{fill:#9370db;font-size:10px}#mermaid-svg-df4CU48E5dnRhyev .relation{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-df4CU48E5dnRhyev .dashed-line{stroke-dasharray:3}#mermaid-svg-df4CU48E5dnRhyev #compositionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #compositionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #aggregationStart{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #aggregationEnd{fill:#ECECFF;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #dependencyStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #dependencyEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #extensionStart{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev #extensionEnd{fill:#9370db;stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev .commit-id,#mermaid-svg-df4CU48E5dnRhyev .commit-msg,#mermaid-svg-df4CU48E5dnRhyev .branch-label{fill:lightgrey;color:lightgrey;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .pieTitleText{text-anchor:middle;font-size:25px;fill:#000;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .slice{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev g.stateGroup text{fill:#9370db;stroke:none;font-size:10px;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev g.stateGroup text{fill:#9370db;fill:#333;stroke:none;font-size:10px}#mermaid-svg-df4CU48E5dnRhyev g.statediagram-cluster .cluster-label text{fill:#333}#mermaid-svg-df4CU48E5dnRhyev g.stateGroup .state-title{font-weight:bolder;fill:#000}#mermaid-svg-df4CU48E5dnRhyev g.stateGroup rect{fill:#ECECFF;stroke:#9370db}#mermaid-svg-df4CU48E5dnRhyev g.stateGroup line{stroke:#9370db;stroke-width:1}#mermaid-svg-df4CU48E5dnRhyev .transition{stroke:#9370db;stroke-width:1;fill:none}#mermaid-svg-df4CU48E5dnRhyev .stateGroup .composit{fill:white;border-bottom:1px}#mermaid-svg-df4CU48E5dnRhyev .stateGroup .alt-composit{fill:#e0e0e0;border-bottom:1px}#mermaid-svg-df4CU48E5dnRhyev .state-note{stroke:#aa3;fill:#fff5ad}#mermaid-svg-df4CU48E5dnRhyev .state-note text{fill:black;stroke:none;font-size:10px}#mermaid-svg-df4CU48E5dnRhyev .stateLabel .box{stroke:none;stroke-width:0;fill:#ECECFF;opacity:0.7}#mermaid-svg-df4CU48E5dnRhyev .edgeLabel text{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .stateLabel text{fill:#000;font-size:10px;font-weight:bold;font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family)}#mermaid-svg-df4CU48E5dnRhyev .node circle.state-start{fill:black;stroke:black}#mermaid-svg-df4CU48E5dnRhyev .node circle.state-end{fill:black;stroke:white;stroke-width:1.5}#mermaid-svg-df4CU48E5dnRhyev #statediagram-barbEnd{fill:#9370db}#mermaid-svg-df4CU48E5dnRhyev .statediagram-cluster rect{fill:#ECECFF;stroke:#9370db;stroke-width:1px}#mermaid-svg-df4CU48E5dnRhyev .statediagram-cluster rect.outer{rx:5px;ry:5px}#mermaid-svg-df4CU48E5dnRhyev .statediagram-state .divider{stroke:#9370db}#mermaid-svg-df4CU48E5dnRhyev .statediagram-state .title-state{rx:5px;ry:5px}#mermaid-svg-df4CU48E5dnRhyev .statediagram-cluster.statediagram-cluster .inner{fill:white}#mermaid-svg-df4CU48E5dnRhyev .statediagram-cluster.statediagram-cluster-alt .inner{fill:#e0e0e0}#mermaid-svg-df4CU48E5dnRhyev .statediagram-cluster .inner{rx:0;ry:0}#mermaid-svg-df4CU48E5dnRhyev .statediagram-state rect.basic{rx:5px;ry:5px}#mermaid-svg-df4CU48E5dnRhyev .statediagram-state rect.divider{stroke-dasharray:10,10;fill:#efefef}#mermaid-svg-df4CU48E5dnRhyev .note-edge{stroke-dasharray:5}#mermaid-svg-df4CU48E5dnRhyev .statediagram-note rect{fill:#fff5ad;stroke:#aa3;stroke-width:1px;rx:0;ry:0}:root{--mermaid-font-family: '"trebuchet ms", verdana, arial';--mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive}#mermaid-svg-df4CU48E5dnRhyev .error-icon{fill:#522}#mermaid-svg-df4CU48E5dnRhyev .error-text{fill:#522;stroke:#522}#mermaid-svg-df4CU48E5dnRhyev .edge-thickness-normal{stroke-width:2px}#mermaid-svg-df4CU48E5dnRhyev .edge-thickness-thick{stroke-width:3.5px}#mermaid-svg-df4CU48E5dnRhyev .edge-pattern-solid{stroke-dasharray:0}#mermaid-svg-df4CU48E5dnRhyev .edge-pattern-dashed{stroke-dasharray:3}#mermaid-svg-df4CU48E5dnRhyev .edge-pattern-dotted{stroke-dasharray:2}#mermaid-svg-df4CU48E5dnRhyev .marker{fill:#333}#mermaid-svg-df4CU48E5dnRhyev .marker.cross{stroke:#333}:root { --mermaid-font-family: "trebuchet ms", verdana, arial;}#mermaid-svg-df4CU48E5dnRhyev {color: rgba(0, 0, 0, 0.75);font: ;}1.燒錄官方高靈敏hex文件2.目標板連接電腦并選擇初始參數3.參數調整4.驗證相互間影響5.將配置信添加到工程6.靈活調整下面從各個步驟進行說明，重點是步驟2、3及步驟6。
步驟說明
1.燒錄官方高靈敏hex文件
向官方或者代理的技術支持要到靜態觸摸調試的hex文件(這個文件官網下載不到)，SC92F8x6xB用到的hex文件已上傳至樓主資源，文件截圖如下：
用官方提供的程序燒錄軟件SOC Pro51燒錄至目標板，軟件及其界面如下：
燒錄中的選項可參考此界面。
2.目標板連接電腦并選擇初始參數
完成上一步操作之后，最好將燒錄器拔插一次，要不然上位機軟件可能會檢測不到目標板。打開觸控調節的上位機軟件，軟件圖標如下：
選擇"高靈敏度觸控"：
上位機初始界面如下：
以SC92F8461B為例，我只會更改紅框中的參數，首先選擇對應的型號，抗干擾設置改為1:12bit，選擇用到的通道，其它參數保持默認，就可以點確定了。
等待觸控芯片自適應參數，若上位機提示檢測不到目標板，可以按下面的步驟進行排查：
避坑指南
①重新拔插目標板與燒錄器的連接，重新拔插燒錄器與電腦的連接。
②調試時用到的TCK和DIO端口是否連接了阻容，如果是，最好拆掉后跳個線再試一下。
tips：以上問題都是我自己曾經遇到過的，最后都由上述方案得到了解決。
連接成功后，就可以進行參數調整了。
3.參數調整
目標板與電腦連接成功后的界面如上圖所示，紅框框中的按鈕表示要調整兩個按鍵的參數，點擊第一個按鈕，界面如下：
點擊啟動調試后，跟隨上位機指示，完成參數調整。
在完成參數調整后，若參數調整成功，界面如下：
再看下失敗的界面：
失敗的界面下會有很多參數是紅色的，這表示參數不在限定條件內，即參數調整失敗。我在調整時也遇到過幾次這樣的現象，基本上都是硬件問題，經驗如下：
①檢查板子的CMOD引腳是否復用外接了負載，此引腳在激活觸控功能時不能連接負載，若連接了負載，斷開負載再試試。
②觸摸按鍵所接的阻容參數不合適，這點可詳細看下文檔，或者問下FAE。
這些數字是多少不是很重要，只要是參數調節成功后，就可以進入下一步操作了。
4.驗證相互間影響
點擊上圖中的按鈕，
按照圖片中的提示進行操作，當按鍵都檢測完后，檢測成功的話會有如下的提示：
我遇到過一次診斷失敗的情況，但是最后排查后發現并不是目標板布線的問題，而是端子處的阻容不匹配，導致提示按鍵之間有影響。
5.將配置信添加到工程
診斷完成后，便可點擊如下按鈕生成.h文件了，默認文件名是S_TouchKeyCFG.h，然后將此文件添加至工程即可。
我個人喜歡將此頭文件和官方的lib文件和.c文件放在一個文件夾下，如下圖所示，方便管理。
6.靈活調整
將此文件添加至工程后，上位機生成的參數只是可以確保開發者能使用按鍵，但是對于EMC實驗等還需要手動微調。可以在調節參數時使用相應規格的銅柱來輔助調整，這里沒有什么技巧，就是慢慢試，而且調整一次就要燒錄一次，然后用銅柱驗證。
下面對哪些是開發者可以自己調整的參數進行說明：
①標號的位置表示是否激活組合按鍵，為0表示不激活組合按鍵，為1表示激活組合按鍵
②標號的位置是用于修改靈敏度的，可用于過emc的抗干擾試驗，兩個字節組成的16位數據，此數據越大，靈敏度便越低。一般來說都是靈敏度太高才需要我們去手動調整，我一般是直接修改高字節的數據，以上圖為例的話，這個數據是未經修改的，我一般會把0x00改成0x01或0x02，來燒錄驗證。這些只是個人經驗，具體板子需要具體應對。
總結
需要提醒一下，賽元的官方庫會直接輸出一個鍵值信息，應該是32位的，這個鍵值是可以直接使用的，當然，也可以基于此鍵值繼續寫一下消抖函數，這個鍵值具體的用法這篇就不介紹了，本文主要目的在于如何成功輸出一個有效的配置頭文件。文中提到的工具都已打包好上傳至我的資源中，包括說明文檔，使用指南和燒錄工具及上位機軟件，都是賽元官方的，除了庫文件外，官網都可以直接下載。
筆芯，變得更強~
總結
以上是生活随笔為你收集整理的赛元单片机触摸按键调节及避坑指南(以SC92F8461B的高灵敏触摸为例)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信小程序_石头剪刀布
- 下一篇： 给div加边框和颜色