CSS 투명Border 적용하기 happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > DESIGN > 디자인 강의 > 기타 > CSS 투명Border 적용하기 상세정보

클라우드태그

Javascript

PHP

ASP

CSS

HTML

MYSQL

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

CSS 투명Border 적용하기

해피팀

네티즌

소스분류

기타

다운로드 횟수

542 회

간단설명

CSS소스코드로 일반 JPG 이미지에 투명보더값을 좌우상하 위치별로 개별적인 투명도 및 전체적인 CSS소스를 줄 수 있습니다. CSS소스중에서 사용되는 "transparent"소스를 사용합니다.

평가하기

.outer {width:180px; height:135px; background: url(sample.jpg); float:left; margin:10px 0 0 15px; display:inline;}

위와같은 방식으로 이미지 url 정보를 기입하여 시작합니다.

.ctr {width:150px; height:105px; background:#000; color:#fff; text-indent:5px;}

지정된 background 컬러를 기입하여 적용합니다.

.top {border-color:transparent #ff0 #0c0 #00c;}
.right {border-color:#c00 transparent #0c0 #00c;}
.bottom {border-color:#c00 #ff0 transparent #00c;}
.left {border-color:#c00 #ff0 #0c0 transparent;}

라는 css로 각 top,right,bottom,left 부분의 transparent 부분을 나타냅니다.

위와같은 방법으로 다양한 소스의 CLASS 코드를

<div class="outer">
</div>

<div class="outer">
<div class="left2"></div>
<div class="right2"></div>
<div class="top">
<div class="ctr">Top</div>
</div>
</div>

위 이미지로 구분하여 적용하면 다양한 방법의 보더투명값을 줄수 있습니다.