css3边框带阴影效果

CSS3可以为元素设置边框带阴影效果,让网页看起来更加美观。下面是一个展示这种效果的样例代码

	.border {
		border: 2px solid #ccc;
		Box-shadow: 2px 2px 5px #888;
	}
	

css3边框带阴影效果

上面的代码一个类名为“border”的元素设定了2px的灰色实线边框,并在其周围产生2px的投影阴影,阴影的颜色为#888。

border属性设定了边框的样式、宽度和颜色。Box-shadow属性使用了一组水平、垂直和模糊半径来产生阴影效果。你可以通过改变这些属性的值来制作出不同样式的边框阴影效果

	.border {
		border: 2px dashed #f00;
		Box-shadow: 5px 5px 10px rgba(0,0.5);
	}
	

上述代码一个类名为“border”的元素设定了一个红色2px虚线边框,并在边框周围产生2px的模糊黑色投影,透明度为0.5。

边框阴影效果能够简单快捷的增强网页的美观程度,在设计网页时可以多加尝试并灵活运用。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效