利用svg描邊 css3實現邊框逐漸消失小動畫

首先簡單的描述一下svg中兩個屬性：

stroke-dasharray：表示每個虛線的長短。

stroke-dashoffset：表示首個虛線的偏移量。

當兩者都特別大的時候就會消失掉

直接上**：

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>邊框逐漸消失
title
>
<
style
>
.br_hide
.br_hide:hover
.br_hide:hover text
.br_hide:hover g
@-moz-keyframes first1
100% 
} @-webkit-keyframes first1
100% 
} 
style
>
head
>
<
body
>
<
a href
="#"
class
="br_hide"
>
<
svg 
xmlns
=""version
="1.1"
width
="80"
height
="36"
>
<
rect 
fill
="none"
stroke
="#dbeaf9"
stroke-width
="2"
width
="80"
height
="36"
/>
<
text 
x="10"
y="24"
>王玉嬌
text
>
<
g fill
="none"
>
<
rect 
width
="80"
height
="36"
/>
g>
svg>
a>
<
a href
="#"
class
="br_hide"
>
<
svg 
xmlns
=""version
="1.1"
width
="80"
height
="36"
>
<
rect 
fill
="none"
stroke
="#c8e3cb"
stroke-width
="2"
width
="80"
height
="36"
/>
<
text 
x="10"
y="24"
>王玉嬌
text
>
<
g fill
="none"
>
<
rect 
width
="80"
height
="36"
/>
g>
svg>
a>
<
a href
="#"
class
="br_hide"
>
<
svg 
xmlns
=""version
="1.1"
width
="80"
height
="36"
>
<
rect 
fill
="none"
stroke
="#dbeaf9"
stroke-width
="2"
width
="80"
height
="36"
/>
<
text 
x="10"
y="24"
>王玉嬌
text
>
<
g fill
="none"
>
<
rect 
width
="80"
height
="36"
/>
g>
svg>
a>
body
>
html
>

即可實現效果。

用CSS3實現文字描邊

css3作為新興的前端技術可以實現很多複雜變化的效果，比如文字描邊。這裡主要用到text shadow屬性，顧名思義就是為文字加上陰影效果。例 text shadow 10px 5px 2px f60 各位置引數說明 text shadow x位移 y位移 模糊程度 顏色其中 x位移和y位移表示陰影...

css3文字描邊css3字型外部描邊

text shadow ec1f1f 1px 0 0,ec1f1f 0 1px 0,ec1f1f 1px 0 0,ec1f1f 0 1px 0 webkit text shadow ec1f1f 1px 0 0,ec1f1f 0 1px 0,ec1f1f 1px 0 0,ec1f1f 0 1px 0...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3，您能夠建立圓角邊框，向矩形新增陰影，使用來繪製邊框 並且不需使用設計軟體，比如 photoshop。在本章中，您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...