CSS - 虛線或虛線文本 - 陰影

我想創建一個帶有文本陰影的CSS效果，以在文本週圍獲得虛線或虛線邊框。就像這樣：

或本：

是否有可能做到這一點與CSS3或/和JavaScript？CSS - 虛線或虛線文本 - 陰影

2017-08-08 Kaprog

我認爲會有沒有辦法做到這一點，但你可以使用'box-shadow'和'-webkit-text-stroke'來做一些類似的操作。 – kravisingh

謝謝，但我不知道如何在你的答案中使用這個。你可以插入一個演示或描述如何使用它到你的答案？ – Kaprog

@Kaprog你會爲漸變陰影創建另一個問題嗎？ –

按照上述意見，查找text-shadow和text-stroke這裏：

h1 { 
 
    font-size: 40px; 
 
    color: #000; 
 
    text-shadow: -1px 0 #ff0000, 0 1px #ff0000, 1px 0 #ff0000, 0 -1px #ff0000; 
 
} 
 

 
h2, h3{  
 
    text-transform: uppercase; 
 
    font-size: 40px; 
 
    margin: 30px 0 0; 
 
    -webkit-text-stroke: 1px black; 
 
    color: #fff; 
 
    text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
 
} 
 
h3{ 
 
    text-shadow: none; 
 
}

<h1>Text Shadow</h1> 
 
<h2>Text Stroke</h2> 
 
<h3>Text Stroke</h3>

欲瞭解更多，你也可以參考這個https://css-tricks.com/adding-stroke-to-web-text/

來源

2017-08-08 07:18:20 kravisingh

感謝您的回答，但這並不能解決我的問題。 – Kaprog

這些是你唯一的選擇。由於您的邊框樣式與文本本身重疊，因此無法使用「text-shadow」/「box-shadow」創建它。你可以像例子那樣使用'text-stroke'，但它只支持實體筆畫。 –

CSS - 虛線或虛線文本 - 陰影

回答

相關問題