>웹 프론트엔드 >JS 튜토리얼 >Baidu Youah의 CSS 둥근 모서리 효과_탐색 메뉴에서 추출

Baidu Youah의 CSS 둥근 모서리 효과_탐색 메뉴에서 추출

WBOY
WBOY원래의
2016-05-16 18:54:591002검색

复主代码 代码如下:



<머리>

百島有啊css圆角方案
<스타일>
.box1{배경:url('http://www.jb51.net/upload/20090330140617327.gif')peat-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') 반복 없음;오버플로:숨김; }
.box1 .cc{높이:40px; 패딩:5px;}
.box1 .tl {왼쪽:0;상단:0;}
.box1 .tr {오른쪽:0;상단:0;배경 위치: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;}
. box2 .cc{높이:40px; 패딩:5px;}
.box2 .tl {왼쪽:-1px;top:-1px;}
.box2 .tr {오른쪽:-1px;top:-1px;배경-위치: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 {왼쪽:0;상단:0;}
.box3 .tr {오른쪽:0;상단:0;배경 위치:0 -5px;}
.box3 .bl {왼쪽:0;하단:0;_하단:-1px;배경-위치:0 -10px;}
.box3 .br {오른쪽:0;하단:0;_하단:-1px;배경- 위치:0 -15px;}


<본문>



圆角一









圆角이









圆角三







更多代码请访问 脚本之家