整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
S教程，用PS繪制虛線的三種方法！
本文作者：@酷coo豆 ，首發于：平面設計學習日記網（http://xxriji.cn/diary10.html）。未經許可禁止轉載商用，盜用追究法律責任。
點線面是平面構成的基本元素，而線條在平面設計中亦有規整分割版面、裝飾造型的作用，能大幅提升版面的可讀性。學會用PS繪制線條是每個自學平面設計初學者的基本功。
本篇平面設計學習日記， @酷coo豆 就簡單總結了用PS繪制虛線常用的三種方法，需者自取。如果已會可自動跳過本文，不必浪費時間。
用鋼筆工具繪制虛線
用鋼筆或形狀工具繪制虛線，是我用得最多，且最為方便的一種方法。這種方法適合直、曲虛線的繪制，由于是矢量的，更便于后期調整或修改。
首先使用鋼筆或形狀工具繪制一個形狀。保持形狀的選中狀態，在工具選項欄中將填充設置為“無”，描邊選擇白色，描邊寬度設置為1像素。同時點開描邊選項，選擇虛線樣式即可繪制出虛線來。如圖：
用鋼筆工具繪制虛線，參數設置
另外，在更多選項中，可以對虛線及其間隙數值進行自定義，能夠實現更多豐富的樣式。見上圖。
用文字工具繪制虛線
說白了其實就是“-”減號，這種方法說來也比較另類，但同樣能達到了虛線的視覺效果，后期調整也極為方便，值得推薦。
1. 如果是橫向的虛線，選中“文字工具”輸入一串減號“------------”即可。選中所有減號后按住Ctrl+← →可調整虛線間距，非常方便大家可自行去嘗試一下。
2. 當然你也可以用形狀或鋼筆工具畫出路徑或者曲線，然后讓文字繞行路徑即可。此法對不規則圖形，以及常見幾何圖形都方便管用。見下圖：多邊形、圓形、圓角矩形等。
用文字工具繪制虛線，參數設置
為了使虛線不出現虛邊的現象，可以在工具欄選項欄中將消除鋸齒模式選為無。調整字體樣式及大小，可對虛線的粗細進行靈活調整。
3. 鉛筆工具
用鉛筆工具繪制虛線
此方法是最為直觀的方法，但是@酷coo豆卻很少用到，原因是此法較為復雜且為像素作圖，不便于后期調整修改，當然將它一并掌握學習一下也不是壞事。
選擇鉛筆工具，挑選圓形筆觸，大小設為1px，按下F5打開畫筆面板，設置“畫筆筆尖形狀”選項卡中的間距。數值設為400%、200%的繪制效果如下。
用鉛筆工具繪制虛線，參數設置
與此同時，如果你覺得虛線的長度太短，你可先用400%的間距畫一條直線，按下“V”切換為移動工具，選中該圖層后按下Alt+→，向右偏移一個像素復制該圖層。此時虛線長度變為2px，合并兩個圖層即可得到一條新的虛線，見上圖。
千里之行始于足下，今天@酷coo豆分享的PS教程只是冰山一角，更多的方法技巧還有待你親自去發現。還不會畫虛線的小伙伴趕緊打開你的PS練習一下吧。都說站在岸上是學不會游泳的，如果你連PS軟件都沒安裝，請使訪問「平面設計學習日記網」搜索PS下載。
平面設計學習日記網，自學者的福音
另外，我們網站收集整理了騰訊大神設計師錄制的《網頁設計教程》（http://t.cn/RJ3pctF）。如果你正在自學或從事平面/網頁設計，想系統學習get一下大神的設計思維，也許里面的教程能助你一臂之力哦。
ay01
day02
day03
day04
day05
day06
day07
day08
day09
day10
day11
day12
order 盒子邊框
復合屬性。設置對象邊框的特性。
盒子邊框三要素：
① 邊框粗細
② 邊框樣式
③ 邊框顏色
語法：border: border-width | border-style | border-color ;
邊框四邊的粗細、樣式、顏色，以及上下左右每個位置的樣式屬性都是可以單獨調整的。
邊框的顏色不是必要的，如果不指定顏色，默認顏色為黑色，但必須為盒子指定寬高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 500px;
height: 50px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>使用 border-style 可為盒子邊框設置樣式，以下示例為實線
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
}效果：
示例 CSS 代碼
如果需要設置不同方向的樣式屬性，可以寫在一句 CSS 代碼里，比如說下面這段代碼，上下實線，左右虛線。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid dashed;
}效果：
屬性值解釋none無輪廓。 border-color將被忽略，border-width計算值為0，除非邊框輪廓為圖像，即border-image。hidden隱藏邊框。IE7及以下尚不支持dotted點狀輪廓。IE6下顯示為dashed效果dashed虛線輪廓solid實線輪廓double雙線輪廓。兩條單線與其間隔的和等于指定的border-width值groove3D凹槽輪廓ridge3D凸槽輪廓inset3D凹邊輪廓outset3D凸邊輪廓
使用 border-width 可為盒子邊框設置粗細，以下示例邊框為 5px 粗細
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width: 5px;
}效果
示例 CSS 代碼
如果需要設置不同方向的邊框粗細，可以寫在一句 CSS 代碼里。
比如說下面這段代碼，上下2px，右2px，左5px。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
}效果：
可直接輸入
顏色的英文名稱
rgb值
十六進制
使用 border-color 可為盒子邊框設置顏色，以下示例邊框顏色為紅色。
/* CSS代碼 */
div{
width: 500px;
height: 50px;
border-style: solid;
border-width:2px 2px 2px 5px;
border-color: red;
}效果：
示例 CSS 代碼
上面有兩個示例講述如何設置不同方向的屬性，border-color 也是相同使用方法，此處就不做示例了。
如果你需要同時設置盒子的粗細、樣式、顏色，那么你可以將他們的樣式表寫在同一行代碼里。
例如：
/* CSS代碼 */
div{
border-top: 5px solid red;
}這段代碼指定了上邊框的三個屬性：粗細、樣式、顏色
border-top 包含了：
其他同理
先來看一個示例
/* CSS代碼 */
div{
width: 100px;
height: 100px;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
細心的你，一定發現了 border 的邊框四條邊交接處是斜角。
此刻我們把盒子的寬高設置為 0
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 50px solid blue;
border-bottom: 50px solid green;
border-left: 50px solid pink;
}效果：
是不是完完全全像四個三角形一樣。
我們只需要把上邊和左右兩邊的三角形隱藏起來，它不就是一個三角形了。
為 border-color 指定 transparent 值，使盒子邊框顏色變透明
/* CSS代碼 */
div{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
border-left: 50px solid transparent;
}效果：
把另外三條邊透明之后，就只剩一個三角形了。
完
部分資料引用自：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
