CSS3在网页设计中起着越来越重要的作用,其中凹陷是一种常见的效果。凹陷是将一块区域压缩并向下凹陷的效果,可用于设计按钮、导航栏等元素。
我们可以使用CSS3中的box-shadow属性来实现凹陷效果,关键在于设置参数:
box-shadow: inset x轴偏移量 y轴偏移量 模糊半径 阴影扩散程度 阴影颜色;
其中inset表示内阴影,x轴偏移量和y轴偏移量决定了阴影位置,模糊半径影响了阴影的模糊程度,阴影扩散程度影响了阴影的大小,阴影颜色决定了阴影的颜色。
现在我们来看一下如何实现凸起的按钮:
button{ background-color: #4285f4; border: none; padding: 12px 24px; color: #fff; font-size: 16px; box-shadow: 0px 5px 10px rgba(0,0,0,0.2); }
我们设置了按钮的背景色、边框、内间距、字体颜色和大小,然后用box-shadow给按钮添加了一个阴影效果,阴影向下偏移5px,模糊半径为10px,阴影扩散程度为0,颜色为rgba(0,0,0,0.2),即黑色半透明。
如果想要实现更深的凹陷效果,可以将阴影颜色设置为较深的颜色,如黑色,增加模糊半径和阴影扩散程度,使阴影更大更模糊:
button{ background-color: #4285f4; border: none; padding: 12px 24px; color: #fff; font-size: 16px; box-shadow: inset 0px 5px 20px 10px rgba(0,0,0,0.4); }
像这样,我们就实现了一个更深的凹陷效果。可以根据实际需求来调整阴影的参数,实现不同的凹陷效果。