萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

用 JavaScript 實現 CSS3 圓角效果:DD_roundies 方案

尋找 IE 下實現 CSS3 圓角效果時找到的實例,未測試不知實際效果,有興趣可自行嘗試:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>線上演示 - LHGCALENDAR</title>
  <script type="text/javascript" src="https://www.qiuzhiquan.com/images/DD_roundies_min.js"></script>
  <script type="text/javascript">
    DD_roundies.addRule('.websjy1', '5px 20px 3px 10px', true);
    DD_roundies.addRule('.websjy2', '5px', true);
    DD_roundies.addRule('.websjy3', '1000px', true);
  </script>
</head>
<body>
  <h3>效果1</h3>
  <div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#66FFFF; margin-bottom:10px;" class="websjy1">32423</div>
  <h3>效果2</h3>
  <div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#EEE; margin-bottom:10px;" class="websjy2">32423</div>
  <h3>效果3</h3>
  <div style="border:1px solid #CCCCCC; width:200px; height:200px; background:#ff0000; margin-bottom:10px;" class="websjy3">32423</div>
</body>
</html>

預覽效果:https://www.websjy.com/club/websjy_index/53/

原理:DD_roundies 利用 VML(IE 專有向量標記語言)在舊版 IE 中模擬 CSS3 border-radius 效果。addRule 接受選擇器、半徑值(支援四角獨立設定)、是否啟用背景圖圓角裁切。注意:外部 JS 連結可能已失效,建議本地化部署。

copyright © 萬盛學電腦網 all rights reserved