整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
ext-decoration屬性介紹#
text-decoration屬性值說明表#
值作用none去掉文本修飾線underline設(shè)置下劃線overline設(shè)置上劃線line-through設(shè)置刪除線
HTML標簽自帶修飾線#
u標簽#
Copy<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>設(shè)置文本修飾線</title> </head> <body> <u>成功不是擊敗別人，而是改變自己</u> </body> </html>
Canvas中，線的默認顏色為黑色，寬度為lpx，但我們可以使用相關(guān)屬性為線添加不同的樣式。下面我們將從寬度、描邊顏色、端點形狀3方面詳細講解線條樣式的設(shè)置方法。
1.設(shè)置線條寬度
使用lineWidth屬性可以定義線的寬度，該屬性的取值為數(shù)值(不帶單位)，以像素為計量。設(shè)置線的寬度的示例代碼如下：
context.lineNidth='10';上述代碼中設(shè)置了線的寬度為10。
2.設(shè)置描邊顏色
使用strokeStyle屬性可以定義線的描邊顏色，該屬性的取值為十六進制顏色值或顏色的英文名。設(shè)置描邊顏色的示例代碼如下：
context.strokeStyle='4f00';
context.strokeStyle='red';在上述代碼中，兩種方式都可以用于設(shè)置線的描邊顏色為紅色。
3.設(shè)置端點形狀
默認情況下，線的端點是方形的，通過lineCap屬性可以改變端點的形狀，示例代碼如下：
context.1ineCap=，屬性值'；lineCap屬性的取值有3個，具體如表所示。
lineCap屬性的取值
了解了設(shè)置線的樣式的基本方法后，下面演示如何為線設(shè)置樣式。
(1)創(chuàng)建C:icodekchapter02\demol3.html，創(chuàng)建畫布并為線設(shè)置寬度、顏色和端點形狀，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="cas" width="300" height="300">
您的測覽器不支持Canvas標簽
</canvas>
<script>
var context=document.getElementById('cas').getContext('2d');
context.moveTo(10,10); // 定義初始位置
context.1ineTo(300,10); // 定義連線端點
context.lineWidth='10'; // 設(shè)置線的寬度
context.strokeStyle='red'; // 設(shè)置線的顏色
context.lineCap='round'; // 設(shè)置線的端點形狀
context.stroke(); // 定叉描邊
</script>
</body>
</html>上述代碼中，第15行代碼設(shè)置了線的寬度為10像素：第16行代碼設(shè)置了線的顏色為紅色;第17行代碼設(shè)置了線的端點為圓形。
(2)保存代碼，在瀏覽器中測試，頁面效果如圖所示。
設(shè)置線的寬度、顏色和端點形狀
頁面顯示一條紅色的線，說明我們已經(jīng)成功為線設(shè)置了樣式。
置邊框最常使用border，比如這樣：
border: 1px dashed #333;這是最常規(guī)的方法了，今天再來說說其他兩種方法，
這也算是一種比較常規(guī)的方法了，
outline: 1px solid;
但需要注意的是，outline是在容器的最外部，與border的渲染還是有點區(qū)別的，同時對比下：
border: 1px dashed #333;
outline: 1px solid;
外部實線是outline，內(nèi)部虛線是border，為了一致，可以設(shè)置outline-offset往內(nèi)縮一點：
outline-offset: -1px;
這是本文的重點，我也是剛get到此項技能，之前一直不知道background居然如此強大，直接上代碼：
background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;
這里我們只設(shè)置了上面看，而且還是虛線的，做一說明這種方式的強大，再把其他邊框補上去：
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
#ffffff;
可見，使用background非常的靈活，邊框的位置可以任意調(diào)整。
現(xiàn)在我們已經(jīng)掌握這幾方式，但本文的重點是上面這種，我們現(xiàn)在來動手操練下：
background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
,
linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
#eee;
.box {
background:
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.box:hover {
animation: linearGradientMove .3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
.box {
background:
linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
linear-gradient(0deg, #FF8235,#30E8BF, #FF8235) repeat-y,
linear-gradient(0deg, #FF8235,#30E8BF, #FF8235) repeat-y;
background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
background-position: 0 0, 0 100%, 0 0, 100% 0;
}
.box:hover {
animation: linearGradientMove 1s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
}
}
以上就是設(shè)置邊框的幾個小技巧。
參考：
https://www.cnblogs.com/coco1s/p/14291567.html
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
