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

2022-02-26 00:14:20 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

在css中，可以使用box-shadow属性来给边框添加一个或多个阴影，设置边框阴影效果，语法格式为“box-shadow:横向阴影纵向阴影模糊半径扩展半径阴影颜色 inset”；inset值用于将外阴影改为内侧阴影，可以省略。

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

在css中，可以使用box-shadow属性来边框阴影效果。此属性可设置阴影的像素长度，宽度和模糊的距离以及阴影的颜色。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
    width:300px;
    height:100px;
    background-color:yellow;
    box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
 
<div></div>
 
</body>
</html>

效果图：

阅读剩余部分

相关阅读 >>

创建漂亮的 css 按钮的 10 个代码片段

css的相邻兄弟选择器何时用

用css怎么实现实现宽高比

css如何清除背景颜色

css border-bottom属性怎么用？

更多相关阅读请进入《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 设计细节

相关推荐

评论