CSS圆角边框凹进去,是一种美观的样式,通常用于按钮或者特殊的容器。下面是一个例子:
.box { width: 200px; height: 100px; padding: 20px; border: 1px solid #ccc; border-radius: 10px; box-shadow: inset 0px 0px 10px #ddd; }
这个代码块定义了一个宽200像素、高100像素的容器,并且给它加上了20像素的内边距以及1像素的实线边框。border-radius属性定义了边框的圆角半径,这里是10像素。最后一个属性box-shadow定义了内阴影,执行inset表示阴影在边框内部。这个阴影看起来像是容器被按下的样式。
上述代码可以随意调整参数来实现不同的样式。比如,增加内边距和阴影的大小可以让凹进去的效果更加明显。调整圆角半径可以得到不同的圆角。
总之,CSS圆角边框凹进去是一种值得掌握的技巧,可以让网站看起来更加美观。