css怎么增加阴影
程序员文章站
2022-04-15 11:30:07
...
css增加阴影的方法：1、使用“box-shadow”属性向框添加一个或多个阴影；2、通过“text-shadow”属性向文本设置阴影。
本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑
css怎么增加阴影？
box-shadow 属性向框添加一个或多个阴影。
提示：请使用 border-image-* 属性来构造漂亮的可伸缩按钮！
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
text-shadow 属性向文本设置阴影。
语法
text-shadow: h-shadow v-shadow blur color;
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。
代码示例：
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
</style>
</head>
<body>
<h1>文本阴影效果！</h1>
</body>
</html>
效果：
以上就是css怎么增加阴影的详细内容，更多请关注其它相关文章！
推荐阅读
-
不知大家遇到过这种问题么，一个层宽度设为100%，并设置背景图片，在浏览器中浏览，缩小窗口到滚动条出现，然后拖动滚动条到右侧，右侧的区域变成空白，怎么解决？_html/css_WEB-ITnose
-
CSS3里怎么实现打字动画
-
怎么提高网站浏览量?网站点击量大大增加方法介绍
-
怎么让css两个属性相等_html/css_WEB-ITnose
-
a标签加上CSS样式后 onclick事件不执行，怎么办- -。_html/css_WEB-ITnose
-
CSS3里怎么实现提示文字的弹窗效果
-
CSS里的text-indent怎么使用
-
html中播放swf文件，怎么显示下面的开关面板的部分？_html/css_WEB-ITnose
-
lavarel 怎么给某张已经生成的表增加字段
-
css3 box-shadow阴影图文教程