ホームページ > 記事 > ウェブフロントエンド > Baidu Youah の CSS 角丸効果_ナビゲーション メニューから抜粋
Baidu Youah の CSS 角丸効果_ナビゲーション メニューから抜粋
- WBOYオリジナル
- 2016-05-16 18:54:59940ブラウズ
复制代代码如下:
.box1{background:url('http://www.jb51.net/upload/20090330140617327.gif')repeat-x #1d6cb7;margin-top:1em;position:relative;zoom:1;width: 778px;}
.box1 .tl,.box1 .tr,.box1 .bl,.box1 .br {幅:5px;高さ:5px;位置:絶対;背景:url('http://www.jb51 .net/upload/20090330140618989.gif') no-repeat;overflow:hidden; }
.box1 .cc{高さ:40px;パディング:5px;}
.box1 .tl {left:0;top:0;}
.box1 .tr {right:0;top:0;background-position:0 -5px;}
.box1 .bl {左:0;下:0;背景の位置:0 -10px;}
.box1 .br {右:0;下:0;背景の位置:0 -15px;}
.box2{border:1px Solid #84cedd;margin-bottom:.8em;position:relative;zoom:1;width:778px;}
.box2 .tl,.box2 .tr,.box2 .bl,.box2 .br {幅:6px;高さ:6px;位置:絶対;背景:url('http://www.jb51.net/upload/20090330140618283.gif') no-repeat;overflow:hidden;}
。ボックス2 .cc{高さ:40px;パディング:5px;}
.box2 .tl {left:-1px;top:-1px;}
.box2 .tr {right:-1px;top:-1px;background-position:0 -6px; }
.box2 .bl {左:-1px;下:-1px;背景位置:0 -12px;}
.box2 .br {右:-1px;下:-1px;背景位置: 0 -18px;}
.box3{position:relative;zoom:1;padding:1em 1.5em;margin:.5em 0 1em 0;背景:#f1f6de}
.box3 .tl,.box3 .tr,.box3 .bl,.box3 .br {幅:5px;高さ:5px;位置:絶対;背景:url('http://www .jb51.net/upload/20090330140618807.gif') no-repeat;overflow:hidden;}
.box3 .cc{height:40px;パディング:5px;}
.box3 .tl {left:0;top:0;}
.box3 .tr {right:0;top:0;background-position:0 -5px;}
.box3 .bl {left:0;bottom:0;_bottom:-1px;background-position:0 -10px;}
.box3 .br {right:0;bottom:0;_bottom:-1px;background-位置:0 -15px;}