css边框阴影怎么设置-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

在css中可以通过box-shadow属性设置一个或多个下拉阴影的框，该属性的使用语法如“box-shadow:Xpx Ypx Zpx #888888;”，其中X表示横向阴影，Y表示纵向阴影，Z表示渐变效果，“#888888”表示阴影颜色。

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

CSS设置边框阴影效果

box-shadow属性可以设置一个或多个下拉阴影的框。

1	`box-shadow: Xpx Ypx Zpx #888888;`

X：横向阴影（偏移值）

Y：纵向阴影（偏移值）

Z：渐变效果

#888888：阴影颜色

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 12px 12px 500px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【推荐学习：css视频教程】

以上就是css边框阴影怎么设置的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

什么是css的行内式？

css border-top-color属性怎么用

html中文本标签，超链接标签以及图像标签的简单介绍

css如何剪切元素??clip属性的使用

css如何设置checkbox大小

详解css中的:placeholder-shown伪类

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css边框阴影怎么设置

css边框阴影怎么设置

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论