争怎路由网/网站教程/内容

如何使用CSS3中box-shadow来制作边框阴影?(代码图文详细教程)

网站教程2024-01-20 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于如何使用CSS3中box-shadow来制作边框阴影?(代码教程),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

box-shadow属性简介

边框阴影,是一种很常见的特效。

以前在CSS2.1时,如果想要为元素添加边框阴影(就像上图那样),也是只能通过背景图片的方法来实现。

在CSS3中,我们可以使用box-shadow属性轻松地为元素添加阴影效果。

语法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;

说明:

(1)x-shadow:设置水平阴影的位置(X轴),可以使用负值;

(2)y-shadow:设置垂直阴影的位置(y轴),可以使用负值;

(3)blur:设置阴影模糊半径;

(4)spread:扩展半径,设置阴影的尺寸;

(5)color:设置阴影的颜色;

(6)inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:5px 5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏览器预览效果如下:

7-5-2.png

水平阴影位置x-shadow和垂直阴影位置y-shadow

水平阴影位置x-shadow和垂直阴影位置y-shadow的属性取值,单位可以是px、em或百分比等,允许负值。

举例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-shadow属性</title>
    <style type="text/css">
    #div1
    {
        width:200px;
        height:100px;
        border:1px solid silver;
        box-shadow:-5px -5px 8px red;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
</body>
</html>

在浏览器预览效果如下:
7-5-3.png

以上就是对如何使用CSS3中box-shadow来制作边框阴影?(代码教程)的全部介绍,如果您想了解更多有关CSS3视频教程,请关注PHP中文网。

以上就是如何使用CSS3中box-shadow来制作边框阴影?(代码教程)的详细内容,更多请关注php中文网其它相关文章!

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:如何运用CSS3中box-shadow来制作边框阴影?(代码图文详细教程)
    相关阅读