加入收藏 | 设为首页
我要投稿

小码哥的IT人生

首页 > Web前端 > css3基础

CSS box-shadow 属性 详解

css3基础 2022-07-14 16:03:2112小码哥的IT人生shichen

CSS box-shadow 属性

定义和用法

box-shadow 属性向框添加一个或多个阴影。

提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！

另请参阅：

CSS3 教程：CSS3 边框

HTML DOM 参考手册：boxShadow 属性

实例

向 div 元素添加 box-shadow：

div
{
box-shadow: 10px 10px 5px #888888;
}

 

完整实例【亲自试一试】：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

页面底部有更多实例。

CSS 语法

box-shadow: h-shadow v-shadow blur spread color inset;

注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

属性值

值 描述 测试
h-shadow 必需。水平阴影的位置。允许负值。 测试
v-shadow 必需。垂直阴影的位置。允许负值。 测试
blur 可选。模糊距离。 测试
spread 可选。阴影的尺寸。 测试
color 可选。阴影的颜色。请参阅 CSS 颜色值。 测试
inset 可选。将外部阴影 (outset) 改为内部阴影。 测试

技术细节

默认值： none
继承性： no
版本： CSS3
JavaScript 语法： object.style.boxShadow="10px 10px 5px #888888"

更多实例

完整实例【扔到桌子上面的图片】：

<!DOCTYPE html>
<html>
<head>
<style>
body
{
margin:30px;
background-color:#E9E9E9;
}
div.polaroid
{
width:294px;
padding:10px 10px 20px 10px;
border:1px solid #BFBFBF;
background-color:white;
/* Add box-shadow */
box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate_left
{
float:left;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
transform:rotate(7deg);
}
div.rotate_right
{
float:left;
-ms-transform:rotate(-8deg); /* IE 9 */
-moz-transform:rotate(-8deg); /* Firefox */
-webkit-transform:rotate(-8deg); /* Safari and Chrome */
-o-transform:rotate(-8deg); /* Opera */
transform:rotate(-8deg);
}
</style>
</head>
<body>
<div class="polaroid rotate_left">
<img src="/i/ballade_dream.jpg" alt="郁金香" width="284" height="213" />
<p class="caption">上海鲜花港的郁金香，花名：Ballade Dream。</p>
</div>
<div class="polaroid rotate_right">
<img src="/i/china_pavilion.jpg" alt="世博中国馆" width="284" height="213" />
<p class="caption">2010年上海世博会，中国馆。</p>
</div>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

本例演示如何创建“宝丽来”图片，并旋转图片。

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 9.0 4.0
3.5 -moz-		 5.1
3.1 -webkit-		 10.5

完整实例1：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px black;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>box-shadow:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" checked="checked" />10px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:<span id="CodeValue">10px 10px black</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.boxShadow=strValue;
document.getElementById(strId).style.WebkitBoxShadow=strValue;
document.getElementById(strId).style.MozBoxShadow=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例2：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px black;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>box-shadow:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" checked="checked" />10px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:<span id="CodeValue">10px 10px black</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.boxShadow=strValue;
document.getElementById(strId).style.WebkitBoxShadow=strValue;
document.getElementById(strId).style.MozBoxShadow=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例3：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px black;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>box-shadow:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="50px 50px 5px black" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" />10px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:<span id="CodeValue">10px 10px black</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.boxShadow=strValue;
document.getElementById(strId).style.WebkitBoxShadow=strValue;
document.getElementById(strId).style.MozBoxShadow=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例4：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px black;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>box-shadow:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="50px 50px 50px 5px black" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" />10px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:<span id="CodeValue">10px 10px black</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.boxShadow=strValue;
document.getElementById(strId).style.WebkitBoxShadow=strValue;
document.getElementById(strId).style.MozBoxShadow=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例5：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px black;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>box-shadow:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="50px 50px 50px 20px red" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" />10px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:<span id="CodeValue">10px 10px black</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.boxShadow=strValue;
document.getElementById(strId).style.WebkitBoxShadow=strValue;
document.getElementById(strId).style.MozBoxShadow=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

完整实例6：

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<style>
ul, li{margin:0;padding:0;}
li{list-style:none;}
div#wrapper{width: 960px;margin: 0 auto;padding: 0;text-align: left;border:1px solid #c5c5c5;}
#SelArea{float: left;width: 480px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#SelArea p{margin:20px;	}
#result{float: left;width: 478px;margin:0;padding:0;border: 0px solid #c5c5c5;}
#CodeArea{width: 440px;margin:0;margin-left: 10px;margin-bottom:10px;padding: 5px;font-family: courier new;color: #222222;background-color: #f1f1f1;border: 1px solid #c3c3c3;}
#DemoArea{width: 450px;height: 280px;margin:0;padding:0;margin-left: 10px;background-color: #ffffff;border: 1px solid #c3c3c3;}
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:10px 10px black;
}
</style>
<body>
<div id="wrapper">
<div id="SelArea">
<h2>CSS 属性：</h2>
<h3>box-shadow:</h3>
<form action="javascript:return false;">
<ul>
<input type="hidden" id="PreSelectedValue" value="10px 10px 50px 20px pink inset" />
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_1" value="10px 10px black" />10px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_2" value="50px 50px black" />50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_3" value="50px 50px 5px black" />50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_4" value="50px 50px 10px black" />50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_5" value="50px 50px 20px black" />50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_6" value="50px 50px 50px black" />50px 50px 50px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_7" value="50px 50px 50px 5px black" />50px 50px 50px 5px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_8" value="50px 50px 50px 10px black" />50px 50px 50px 10px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_9" value="50px 50px 50px 20px black" />50px 50px 50px 20px black</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_10" value="50px 50px 50px 20px red" />50px 50px 50px 20px red</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_11" value="50px 50px 50px 20px blue" />50px 50px 50px 20px blue</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_12" value="50px 50px 50px 20px pink" />50px 50px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_13" value="40px 40px 50px 20px pink" />40px 40px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_14" value="20px 20px 50px 20px pink" />20px 20px 50px 20px pink</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_15" value="10px 10px 50px 20px pink inset" />10px 10px 50px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_16" value="10px 10px 30px 20px pink inset" />10px 10px 30px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_17" value="10px 10px 5px 20px pink inset" />10px 10px 5px 20px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_18" value="10px 10px 5px 10px pink inset" />10px 10px 5px 10px pink inset</li>
<li><input autocomplete="off" type="radio" name="rpos" onClick="test_demo(this)" id="value_19" value="10px 10px 5px 5px pink inset" />10px 10px 5px 5px pink inset</li>
</ul>
</form>
</div>
<div id="result">
<h2>结果：</h2>
<div id="DemoArea">
<div id="MyDIV"></div>
</div>
<h2>CSS 代码：</h2>
<pre id="CodeArea">
div#MyDIV
{
background-color:yellow;
width:200px;
height:100px;
box-shadow:<span id="CodeValue">10px 10px black</span>;
}
</pre>
</div>
<script>
function test_demo_val(strValue)
{
var strId="MyDIV"
document.getElementById(strId).style.boxShadow=strValue;
document.getElementById(strId).style.WebkitBoxShadow=strValue;
document.getElementById(strId).style.MozBoxShadow=strValue;
document.getElementById("CodeValue").innerHTML=strValue;
}
function tiy_onload(){
    var PreVal=""
    PreVal=document.getElementById("PreSelectedValue").value
    if (PreVal!=""){
        test_demo_val(PreVal)
        var x=document.getElementsByTagName("input")
        var l=x.length
        for (i=0;i<l;i++){
            if (x[i].value==PreVal){
                x[i].checked=true
            }
        }
    }
}
function test_demo(obj){
    test_demo_val(obj.value)
}
tiy_onload()
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

相关阅读

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
 ICP备案号：苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024