css 顶部投影 |jsp如何创建css

.box {
box-shadow: 0 -5px 5px -5px rgba(0,0,0,0.3);
}

上面的代码中，box-shadow属性的第一个参数是水平偏移量，此处为0，表示不偏移；第二个参数是垂直偏移量，为-5px，表示向上偏移5px；第三个参数是模糊半径，为5px，表示模糊半径为5px；第四个参数是投影颜色，此处为黑色半透明。这样一来，box元素的顶部就会出现一个向上的投影效果。

通过改变参数值，可以实现不同的顶部投影效果。比如，可以调整垂直偏移量和模糊半径，使投影更加扁平和柔和。

.box {
box-shadow: 0 -3px 3px -3px rgba(0,0,0,0.2);
}

上面的代码中，垂直偏移量为-3px，模糊半径为3px，投影颜色为黑色半透明。这样一来，box元素的顶部就会出现一个更加柔和的投影效果。

除了box-shadow属性，还可以使用border-top属性来实现顶部投影。比如，可以通过设置border-top样式为渐变色，来实现渐变的投影效果。

.box {
border-top: 20px solid #fff;
border-image: linear-gradient(to right, #f00, #0f0, #00f);
border-image-slice: 1;
}

上面的代码中，border-top样式的宽度为20px，颜色为白色；border-image样式的值为线性渐变，从红色到绿色到蓝色；border-image-slice样式的值为1，表示将渐变色样式应用到整个border-top边框上。这样一来，box元素的顶部就会出现一个渐变的投影效果。

总之，通过使用box-shadow和border-top属性，可以实现不同的顶部投影效果，为网页设计带来更加多样化和炫酷的效果。