CSS3 基础知识 box-shadow 学习工具

通过界面上方的按钮控制下面的阴影效果

shadow,box

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2002
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

updateShadow();

编译

CSS

html {
  background: url(http://subtlepatterns.com/patterns/seamless_paper_texture.png); }

input[type=number] {
  text-align: right; }

input[type=color] {
  -webkit-appearance: none;
  font-size: 0.7em; }

input[type=color], input[type=number], .checkbox {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 27px;
  padding: 3px;
  border: 1px solid #555;
  background: transparent; }

input[type=color]:focus, input[type=number]:focus, .checkbox:focus {
  outline: none;
  border-color: #ddd; }

.checkbox.focus {
  border-color: #ddd; }

.form {
  background: #000;
  color: #ddd;
  text-align: center;
  padding: 40px 0 20px;
  font-size: 1.3em; }

.form ul {
  margin: 0.5em 0;
  padding: 0;
  list-style: none; }

.form li {
  display: inline-block;
  position: relative;
  margin: 0 7px 0 0; }

.form label {
  position: absolute;
  top: -20px;
  font-size: 0.7em;
  left: 0;
  width: 68px;
  color: #999; }

.form label[for=color] {
  margin-left: 60px; }

small {
  color: #999;
  font-size: 0.7em; }

.box {
  background: #fff;
  width: 500px;
  padding: 100px 0;
  margin: 60px auto;
  text-align: center; }

.box, code, input {
  font-family: consolas, monaco, monospace; }

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>

通过界面上方的按钮控制下面的阴影效果

shadow,box

编辑器支持Emmet

快捷键

通过界面上方的按钮控制下面的阴影效果

shadow,box

CSS3 box-shadow多重阴影-拓展案例

CSS3 不错的一个弹性布局（flexbox ）基础知识演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：