當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

css案例学习之span边框实现的特殊效果

發布時間：2023/12/9 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 css案例学习之span边框实现的特殊效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

bottom left

bottom right

top left

top right

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

#menu a span{height:0;width:0;/*border-top:solid 6px #fff;border-left:solid 6px #f90;*//*border-top:solid 6px #fff;border-right:solid 6px #f90;*//*border-bottom:solid 6px #fff;border-left:solid 6px #f90;*/border-bottom:solid 6px #fff;border-right:solid 6px #f90;position:absolute;top:0;left:0;overflow:hidden;} <div id="menu"><a href="#"><span class="left"></span> Home </a> <a href="#"><span class="left"></span>Contact Us </a><a href="#"><span class="left"></span>Web Dev </a> <a href="#"><span class="left"></span>Web Design </a> <a href="#"><span class="left"></span>Map </a></div>

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

完整代碼如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><style>#menu {font-family:Arial;font-size:14px;}#menu a, #menu a:visited {display:block; float:left;position:relative;background-color:#c00;color:#fff; text-decoration:none;padding:6px;margin:1px 0 0 1px; }#menu a span{height:0;width:0;border-bottom:solid 6px #c00;border-left:solid 6px #fff;position:absolute;top:0;left:0;overflow:hidden;}#menu a:hover{background-color: #F90;color:#333}#menu a:hover span{border-bottom:solid 6px #f90;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>自適應的水平的菜單</title></head><body><div id="menu"><a href="#"><span class="left"></span> Home </a> <a href="#"><span class="left"></span>Contact Us </a><a href="#"><span class="left"></span>Web Dev </a> <a href="#"><span class="left"></span>Web Design </a> <a href="#"><span class="left"></span>Map </a></div> </body> </html>

實現了一種被裁減的感覺

總結

以上是生活随笔為你收集整理的css案例学习之span边框实现的特殊效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。