增加立体效果

MitSeek 发布于 2025-11-20 19:40 阅读：38 JAVASCRIPT
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .show{
                width: 150px;
                height: 50px;
                text-align: center;/* //文本水平居中 */
                line-height: 50px;/* //设置准直居中 */
                border-right: #222222 20px solid;/* //设置右边框 */
                border-left: #dddddd 20px solid;/* //设置左边框 */
                border-top: #dddddd 20px solid;/* //设置上边框 */
                border-bottom: #222222 20px solid;/* //设置下边框 */
                background-color: #cccccc;/* //设置背景颜色 */
            }
        </style>
    </head>
    <body>
        <input type="button" value="动态增加立体效果"  onclick="change()"/>
        <hr />
        <div id="box">立体效果</div>
    </body>
</html>
<script>
    //定义chang()函数
    function change(){
        document.getElementById("box").className="show";//给box添加show样式
    }
</script>
JAVASCRIPT