在css中,可以使用box -s hadow属性来给设置div阴影,只需要给div元素添加“box-shadow: 水平阴影值 垂直阴影值 模糊 距离 阴影大小 阴影颜色 inset;”样式即可;其中“inset”值,可省略,它是设置内阴影的。
本教程操作环境:windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。
css设置div阴影
<!DOCTY PE html>
<html>
<head>
< ;m eta charset="utf-8">
<style>
div
{
width:300px;
h ei ght:100px;
background-color:yellow;
box-shadow: 10px 10px 5px # 888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果图:
说明:
box-shadow属性可以设置一个或多个下拉阴影的框。
语法
box-shadow: h-shadow v-shadow blur s PR ead color inset;
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影( 开始 时) 改变 阴影内侧阴影 |
学习视频分享:css视频教程
以上就是css怎么设置div阴影的详细内容,更多请关注其它相关 文章 !
总结
以上是 为你收集整理的 css怎么设置div阴影 全部内容,希望文章能够帮你解决 css怎么设置div阴影 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did250141