css案例學習之span邊框實現的特殊效果

2021-09-07 03:58:29 字數 1316 閱讀 8097

配合顏色來使用,實現一些神奇的效果

#menu a span

"

menu

">

"#">

class="

left

">

home

"#">

class="

left

">

contact us

"#">

class="

left

">

web dev

"#">

class="

left

">

web design

"#">

class="

left

">

map

說明:當span的height、width設定為0的時候,配合border的樣式,就能實現神奇的邊框效果

完整**如下

"

-//w3c//dtd xhtml 1.0 transitional//en""

">

"">"

menu

">

"#">

class="

left

">

home

"#">

class="

left

">

contact us

"#">

class="

left

">

web dev

"#">

class="

left

">

web design

"#">

class="

left

">

map

實現了一種被裁減的感覺

CSS揭秘 案例2 多重邊框

定義和用法 box shadow 屬性向框新增乙個或多個陰影 語法 box shadow h shadow v shadow blur spread color inset 值描述 h shadow 必需。水平陰影的位置。如果值為正值,則陰影在物件的右邊,反之其值為負值時,陰影在物件的左邊。v sh...

css前端之邊框

破折線式邊框 點線式邊框 雙線框槽線式邊框 顏色不會改變?內嵌效果的邊框 凸起效果的 脊線效果的 直線效果的 直線效果的 border radius 表示邊框的半徑使邊框四周變橢圓 box shadow 用於向方框新增陰影其後的值有h shadow 水平陰影 v shadow 垂直陰影 blur 模...

css3學習筆記之邊框

123 4567 891011 1213 1415 1617 1819 20 html head style t1 body divid t1 border radius 屬性允許您為元素新增圓角邊框!box shadow12 3456 78910 1112 1314 1516 1718 19 ht...