개체의 내용을 위로 띄우는 것 처럼되고 그림자가 나타나는 효과를 생성하여 표현한다.

Script object.style.filter='{progid:DXImageTransform.Microsoft.](propVal)'
HTML <ELEMENT style="filter:{progid:DXImageTransform.Microsoft.](propVal)">
DropShadow 필터 예제(클릭)
인수
propVal : (속성 문자열)
필터가 가질 수 있는 한개 이상의 속성들로 속성=값들을 컴마(,)로 연결, 구성된 문자열이다.

progid:DXImageTransform.Microsoft. 부분은 생략이 가능하나 속성과 효과가 다소 다를 수 있다.


애트리뷰트 속성 설명
color Color 필터에 적용되는 색상값을 반환하거나 설정한다.
enabled Enabled 필터가 작용할 수 있게 할 것인가를 반환하거나 설정한다. true: 사용가능, false:사용 불가능
OffX OffX 그늘진 효과를 나타내는 수평 오프셋트 거리를 픽셀단위로 반환하거나 설정한다.
OffY OffY 그늘진 효과를 나타내는 수직 오프셋트 거리를 픽셀단위로 반환하거나 설정한다.
Positive Positive 개체의 투명부분에서 그늘진 효과를 낼 것인가를 부울값으로 반환하거나 설정한다.
특기

Positive 속성을 false나 0으로 설정하면 그림자가 투명한 부분 이외의 지역에만 나타나고, true나 1 이면 투명 부분에도 나타난다.

적용style
A, ACRONYM, ADDRESS, B, BDO, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, hn, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, MARQUEE, MENU, NOBR, OL, OBJECT, P, plainText, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, TABLE, TD, TEXTAREA, TH, TT, U, UL, VAR, XMP

DIV에서 필터 속성 예제

와 문자열

필터 표시창
<SCRIPT>
aColors=new Array('pink','red','yellow','aqua','green','blue','brown','teal');
Bidx=0;
function doPlay(job){
  if (!job) divObj.filters[0].Enabled=false;
  else {
    divObj.filters[0].Enabled=true;
    if (job==2){
      if (divObj.filters[0].Positive) divObj.filters[0].Positive=false
      else divObj.filters[0].Positive=true;
    } else if (job==3) divObj.filters[0].Color=aColors[++Bidx%aColors.length];
  }
  str='divObj.style.filter='+divObj.style.filter+'<BR>';
  str+='divObj.filters[0].Enabled=('+divObj.filters.item(0).Enabled+'), ';
  str+='divObj.filters[0].Positive=('+divObj.filters[0].Positive+')<BR>';
  str+='divObj.filters[0].OffX=('+divObj.filters[0].OffX+') divObj.filters[0].OffY='+divObj.filters[0].OffY+'),<BR>';
  str+='divObj.filters[0].Color=('+divObj.filters[0].Color+'), ';
  str+='divObj.style.color=('+divObj.style.color+')<BR>';
  show.innerHTML=str;
}
</SCRIPT>
<STYLE>.butClass{width:120;background:afa;color:blue;padding-top:4}</STYLE>
<DIV id="divObj" style="width:460;font-size:50;line-height:1.2em;font-weight:bold;color:blue;padding:20;
  filter:DropShadow(Positive=true,OffX=10,OffY=10)" ><IMG src='http://trio.co.kr/gif/triov.jpg'>와 문자열
</DIV>

<BUTTON onclick="doPlay(0)" class="butClass">정상 이미지</BUTTON>
<BUTTON onclick="doPlay(1)" class="butClass">필터 효과</BUTTON>
<BUTTON onclick="doPlay(2)" class="butClass">Positive 전환</BUTTON>
<BUTTON onclick="doPlay(3)" class="butClass">Color 변화</BUTTON><BR>
<DIV id=show style="width:480;height:70;border:solid 1 blue;padding:3">필터 표시창</DIV>