css中设置边框阴影效果

最新推荐文章于 2024-05-14 21:05:08 发布

Iukyxh

最新推荐文章于 2024-05-14 21:05:08 发布

阅读量3k

点赞数 3

分类专栏：前端，css，javascript 文章标签： css 前端设计

本文链接：https://blog.csdn.net/ukyhuang_xinyi/article/details/78806198

版权

前端，css，javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在进行前端页面设计的时候，过于线条化的边框常常显得不太友好。为了解决这个问题，CSS中有专门设置边框阴影的属性box-shadow。

支持box-shadow属性的浏览器：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1。

box-shadow的用法：

       box-shadow: h-shadow v-shadow blur spread color inset;

这6个值分别是：left值、top值、透明度、阴影外延宽度、颜色、向里凹陷（选填，默认为外延outset）。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style> 
				div
				{
					margin-top:100px;
					margin-left:100px;
					width:200px;
					height:200px;
					background-color:#C8E0C4;
					 
					box-shadow:30px 10px 25px 10px #808080 inset;
				}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

效果图：

Iukyxh

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css中设置边框阴影效果

在进行前端页面设计的时候，过于线条化的边框常常显得不太友好。为了解决这个问题，CSS中有专门设置边框阴影的属性box-shadow。支持box-shadow属性的浏览器：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1。 box-shadow的用法： box-shadow: h-shado
复制链接

扫一扫