css div凹凸效果 |css替换字体颜色

第一种方法是使用CSS3中的box-shadow属性。box-shadow是一个非常强大的属性，它可以为页面元素创建出阴影效果。

div{
width: 150px;
height: 150px;
background-color: #fff;
box-shadow: -5px -5px 10px #ccc, 
5px 5px 10px #ccc;
}

在上面的示例中，大家为div元素设置了一个宽度和高度，并指定了背景颜色为白色。然后，大家分别设置两个box-shadow属性，一个属性用于创建上方和左侧的阴影，另一个属性用于创建下方和右侧的阴影。两个属性的值不同，产生的效果就是一个立体感比较强的凹凸效果。

第二种方法是使用CSS3中的transform属性。transform属性可以对页面元素进行旋转、缩放等变换。

div{
width: 150px;
height: 150px;
background-color: #fff;
transform: skew(10deg, 10deg) rotate(5deg);
box-shadow: -5px -5px 10px #ccc, 
5px 5px 10px #ccc;
}

在上面的示例中，大家为div元素设置了一个宽度和高度，并指定了背景颜色为白色。然后，大家使用transform属性对div元素进行了一系列变换，包括倾斜和旋转。这些变换的效果是一个更加强烈的凹凸效果。

以上就是CSS div凹凸效果的实现方法，可以根据需要选择不同的方法进行应用。希望这篇文章对您有所帮助。