首页 php下载 php教程 电脑软件 手机软件 手机游戏 单机游戏 资讯文章 专题下载 标签合集

css阴影怎么写

时间:2021-07-20

来源:互联网

在手机上看
手机扫描阅读

今天PHP爱好者给大家带来css阴影的写法,阴影的写法:1、文本阴影“text-shadow: h-shadow v-shadow blur color;”;2、边框阴影“box-shadow: h-shadow v-shadow blur spread color inset;”。希望对大家有所帮助。

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

1、css文本阴影的写法

在css中,可使用text-shadow属性来实现带阴影的文本,text-shadow 属性应用于阴影文本。

语法

text-shadow: h-shadow v-shadow blur color;

描述



h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。

注意: text-shadow属性连接一个或更多的阴影文本。属性是阴影,指定的每2或3个长度值和一个可选的颜色值用逗号分隔开来。已失时效的长度为0。

示例:

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>css设置文本阴影效果</title>
       <style>
           h1 {
               color: red;
               text-shadow: 3px 5px 5px #656B79;
           }
       </style>
   </head>
   <body>
       <h1>文本阴影!</h1>
   </body>
</html>

效果图:

1.png

2、css边框阴影的写法

在css中,可使用box-shadow属性实现边框阴影效果,box-shadow属性可以设置一个或多个下拉阴影的框。

语法

box-shadow: h-shadow v-shadow blur spread color inset;

说明



h-shadow

必需的。水平阴影的位置。允许负值

v-shadow

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。

inset

可选。从外层的阴影(开始时)改变阴影内侧阴影

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

示例:

<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 300px;
height: 100px;
background-color: #ff9900;
-moz-box-shadow: 10px 10px 5px #888888;
/* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}
</style>
</head>
<body>

<p>边框阴影</p>

</body>
</html>

效果图:

2.png

以上就是css阴影怎么写的详细内容,更多请关注php爱好者其它相关文章!

热门下载

更多