css皮肤样式切换 |css 蒙版效果

下面是一个简单的示例，使用CSS样式表来实现皮肤样式的切换：

/* 定义三个不同风格的样式表 */
.skin1 { background-color: #fff; color: #000; }
.skin2 { background-color: #000; color: #fff; }
.skin3 { background-color: #f00; color: #fff; }

在HTML文件中，通过使用不同的class名来调用不同的样式表，从而实现切换：

<div id="content" class="skin1">
<p>这是一个段落</p>
<ul>
<li>这是一个列表项</li>
<li>这是另一个列表项</li>
</ul>
</div>
<button onclick="changeSkin('skin2')">切换为黑色皮肤</button>
<button onclick="changeSkin('skin3')">切换为红色皮肤</button>

JavaScript函数changeSkin会根据传入的参数，改变content元素的class名，从而调用不同的样式表实现切换：

function changeSkin(skin) {
document.getElementById('content').className = skin;
}

通过这种方法，可以方便地实现各种不同的皮肤样式切换，从而让网站拥有更好的用户体验和外观。