本文摘自PHP中文网,作者藏色散人,侵删。
在css中可以通过“box-shadow”属性设置一个或多个下拉阴影的框,其使用语法如“box-shadow: h-shadow v-shadow blur spread color inset;”,该属性是一个用逗号分隔阴影的列表。
本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。
box-shadow属性可以设置一个或多个下拉阴影的框。
1 2 3 4 | 默认值:none
继承:no
版本:CSS3
JavaScript 语法:object.style.boxShadow= "10px 10px 5px #888888"
|
语法
1 | box-shadow: h-shadow v-shadow blur spread color inset;
|
注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
1 2 3 4 5 6 7 | 值
h-shadow必需的。水平阴影的位置。允许负值
v-shadow必需的。垂直阴影的位置。允许负值
blur可选。模糊距离
spread可选。阴影的大小
color可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset可选。从外层的阴影(开始时)改变阴影内侧阴影
|
【推荐学习:css视频教程】
代码示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
效果:
以上就是css怎么加阴影的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
了解css的选择器优先级和!important权重
css怎么隐藏li
visited css 不起作用怎么办
css white-space属性怎么用
左浮动 css怎么写
css perspective属性怎么用
vue的css动画
css中有哪些属性可以继承
css不可能实现的功能是什么
css实现快速回到顶部效果
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么加阴影