如何使用CSS移動虛線邊框？

java
css

2013-02-09 34 views 3 likes

我在輸入文本元素周圍顯示一個虛線邊框： border: 1px dashed black;如何使用CSS移動虛線邊框？

我可以以某種方式定義一個「偏移量」來告訴瀏覽器從哪裏開始邊框？

我的目標是定義一個計時器，並改變虛線邊界的偏移量（使用java GWT element.setAttribute（）），以便模擬順時針移動的虛線邊界。

是否有任何現有的與CSS的邊界偏移？

2013-02-09 membersound

CSS不直接支持這個。搜索'css marching ants border'和/或查看https://developer.mozilla.org/en-US/docs/CSS/border-image, http://en.wikipedia.org/wiki/Marching_ants或者你可以同時使用'outline'和'border'並將它們以某種方式組合在一起。 – biziclop 2013-02-09 14:32:09

它不可能，請檢查：http://stackoverflow.com/questions/5261122/moving-dotted-border-using-css – Kasyx 2013-02-09 14:42:24

使用邊框圖像會好嗎？ – vals 2013-02-20 18:07:29

回答

用一個動畫的.gif作爲div的背景，把想要「鑲嵌」的任何內容放置在第一個div中嵌入第二個div並帶有1px的邊距，這樣的效果有點令人費解。

動畫的.gif應該是一個小方塊（8px x 8px），3px寬的對角線從左到右移動（您可以調整大小以調整線條的寬度）。當只有圖像的像素寬度或高度可見時，它似乎是一個移動的虛線邊框。

此技術在此處詳述：http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page。

來源

2013-03-03 16:23:14 ASGM

相關問題

11. 實心邊框或虛線邊框？何時使用哪個？
12. UICollectionViewCell虛線邊框
13. 用虛線邊框Flex BorderContainer
14. 如何用虛線邊框或雙線邊框創建文本框
15. CSS Firefox - 如何取消虛線邊框（firefox click indicator）？
16. 與邊框圖像的虛線邊框
17. 虛線邊框邊框圓角
18. 如何在WPF中實現虛線或虛線邊框？
19. iOS動畫虛線矩形邊框
20. 自定義虛線邊框。
21. 的RichTextBox與虛線邊框
22. 繪製虛線邊框
23. WPF虛線邊框控件
24. 將CSS邊框向右移動
25. CSS：圖片邊框移動它
26. 移動網站上的邊框CSS
27. 使用4x4矩陣移動邊線
28. 如何刪除Firefox中選擇框的虛線邊框
29. CSS線性漸變邊框
30. CSS畫斜線邊框