100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html 边框立体效果 巧用边框线实现立体按钮效果(纯CSS)

html 边框立体效果 巧用边框线实现立体按钮效果(纯CSS)

时间:2021-04-20 17:32:39

相关推荐

html 边框立体效果 巧用边框线实现立体按钮效果(纯CSS)

本文教你用

页面代码:

中国网页设计中国网页设计

将LI定义为按钮样式,鼠标放上后显示出立体效果,整体视觉体验舒服,代码兼容性好,简洁高效。

CSS代码:

#navigation ul {

list-style: none;

margin: 0;

padding: 0;

padding-top: 4px;

}

#navigation li {

display: inline;

}

#navigation a:link, #navigation a:visited {

margin-right: 2px;

padding: 8px 15px 8px 15px;

color: #A6;

background-color: #FCE6EA;

text-decoration: none;

border-top: 1px solid #FFFFFF;

border-left: 1px solid #FFFFFF;

border-bottom: 1px solid #717171;

border-right: 1px solid #717171;

}

#navigation a:hover {

border-top: 1px solid #717171;

border-left: 1px solid #717171;

border-bottom: 1px solid #FFFFFF;

border-right: 1px solid #FFFFFF;

}

125jz网原创文章。发布者:江山如画,转载请注明出处:/4653.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。