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

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

WBOY
풀어 주다: 2016-05-16 18:54:59
원래의
981명이 탐색했습니다.

复主代码 代码如下:



<머리>

百島有啊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;}


<본문>



圆角一









圆角이









圆角三







更多代码请访问 脚本之家




원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿