jQuery CSS3 box-shadow属性设置css3阴影样式代码



230 917 306



特效描述: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

加群请备注:从官网了解到