[分享]css两角写投影

CSS的两角投影效果是一种常用的网页装饰效果。它可以让网页元素的两个角（或四个角）呈现出立体感，使得网页更加美观和有层次感。本文将介绍如何使用CSS来实现两角投影效果。.box { width: 20...

CSS的两角投影效果是一种常用的网页装饰效果。它可以让网页元素的两个角（或四个角）呈现出立体感，使得网页更加美观和有层次感。本文将介绍如何使用CSS来实现两角投影效果。

.box {
  width: 200px;
  height: 150px;
  background-color: #fff;
  box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.3);
} 

上述代码中，我们使用了box-shadow属性来设置投影效果。该属性有四个参数，分别是水平偏移量、垂直偏移量、模糊半径和扩散半径。其中，水平偏移量和垂直偏移量表示投影的位置，负值表示向左或向上偏移，正值表示向右或向下偏移。模糊半径表示模糊程度，数值越大，模糊效果越明显。扩散半径表示投影的范围，数值越大，投影范围越广。

针对两角投影效果，我们需要将box-shadow属性中的水平偏移量和垂直偏移量设置为负值，以表示向左或向上偏移。同时，我们需要设置模糊半径和扩散半径，来产生具有立体感的阴影效果。

.box {
  width: 200px;
  height: 150px;
  background-color: #fff;
  box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3), -10px -10px 10px rgba(0, 0, 0, 0.3);
} 

上述代码中，我们使用了多个box-shadow属性来同时实现两个角投影效果。第一个box-shadow属性实现左下角的投影效果，第二个box-shadow属性实现右下角的投影效果，第三个box-shadow属性实现左上角的投影效果。

总之，CSS的两角投影效果是一种简单而实用的装饰效果，可以让网页元素更加美观和有层次感。通过使用box-shadow属性，我们可以轻松实现两角投影效果。