CSS动态增加立体效果

最新推荐文章于 2024-04-18 10:30:43 发布

小Y重新出发

最新推荐文章于 2024-04-18 10:30:43 发布

阅读量570

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_43230812/article/details/122520700

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .show{
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-right:#222222 20px solid ;
            border-bottom:#222222 20px solid ;
            border-left:#dddddd 20px solid ;
            border-top:#dddddd 20px solid ;
            background-color:#cccccc ;
        }
    </style>
</head>
<body>
<input type="button" value="动态增加立体效果" onclick="change()"> <hr/>
<div id="box">立体效果</div>

</body>
</html>
<script>
    function change() {
        document.getElementById("box").className="show";   //给box添加show样式
    }
</script>