Materialise CSS阴影 _MaterializeCSS

Materialize CSS提供了不同类型的特殊类, 以将容器显示为带有阴影的纸质卡片。这些阴影使文字和图像更具吸引力。

Index	Class name	Description
1)	z-depth-0	默认情况下, 它用于删除具有z深度的元素的阴影。
2)	z-depth-1	它用于为具有1px带边框阴影的任何html内容设置容器样式。 z深度加1。
3)	z-depth-2	它用于为具有2px带边框阴影的任何html内容设置容器样式。将z深度增加2。
4)	z-depth-3	它用于为具有3px带边框阴影的任何html内容设置容器样式。将z深度加3。
5)	z-depth-4	它用于为具有4px带边框阴影的任何html内容设置容器样式。将z深度增加4。
6)	z-depth-5	它用于为具有5px带边框阴影的任何html内容设置容器样式。将z深度增加5。

例子
【Materialise CSS阴影】让我们以一个示例来演示Materialise CSS阴影。

< !DOCTYPE html> < html> < head> < title> The Materialize Example< /title> < meta name = "viewport" content = "width = device-width, initial-scale = 1"> < link rel = "stylesheet"href = "https://fonts.googleapis.com/icon?family=Material+Icons"> < link rel = "stylesheet"href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css"> < script type = "text/javascript"src = "https://code.jquery.com/jquery-2.1.1.min.js"> < /script> < script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"> < /script> < style> div {width : 200px; height : 200px; } < /style> < /head> < body class = "container"> < h2> Materialize CSS Shadow< /h2> < hr/> < div class = "card-panel"> < p> < b> Block1:< /b> Learn Materialize CSS< /p> < /div> < div class = "z-depth-1"> < p> < b> Block2:< /b> Learn Materialize CSS< /p> < /div> < div class = "z-depth-2"> < p> < b> Block3:< /b> Learn Materialize CSS< /p> < /div> < div class = "z-depth-3"> < p> < b> Block3:< /b> Learn Materialize CSS< /p> < /div> < div class = "z-depth-4"> < p> < b> Block4:< /b> Learn Materialize CSS5< /p> < /div> < div class = "z-depth-5"> < p> < b> Block4:< /b> Learn Materialize CSS< /p> < /div> < /body> < /html>

立即测试
输出