jQuery CSS3 box-shadow屬性設置css3陰影樣式代碼



249 994 332



特效描述:jQueryCSS3 box-shadow css3陰影樣式,css3陰影樣式代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

2. 引入JS

<script src="js/modernizr.js"></script>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/index.js"></script>

3. HTML代碼

  <div class="form">
  <ul>
    <li>
      <label for="x">offset x</label>
      <input type="number" id="x" value="0" /><code>px</code>
    </li>
    <li>
      <label for="y">offset y</label>
      <input type="number" id="y" value="0" /><code>px</code>
    </li> 
    <li>
      <label for="size">(blur)</label>
      <input type="number" id="size" value="10" /><code>px</code>
    </li>
    <li>
      <label for="spread">(spread)</label>
      <input type="number" id="spread" value="0" /><code>px</code>
    </li>
    <li>
      <label for="color">(color</label>
      <code>rgba(</code><input type="color" id="color" value="#000000" /><code>,</code>
    </li>
    <li>
      <label for="alpha">alpha)</label>
      <input type="number" id="alpha" value="1" min="0" max="1" step="0.1" /><code>)</code>
    </li>
    <li>
      <label for="inset">(inset)</label>
      <span class="checkbox"><input type="checkbox" id="inset" /></span>
    </li>
  </ul>  
  <small>values in () are optional</small>
</div>
<div class="box"></div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動選項卡 滑動切換 滾動切換 滾動條切換 彈出層拖動 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動星星打分 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 提示框/彈出層 文本框 text文本框 選項卡自動切換 顏色選擇 顏色選擇器 編輯器
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子