个性化阅读
专注于IT技术分析

css3阴影shadow – CSS3高级教程

上一章CSS3高级教程请查看:css3文本溢出

使用CSS3,您可以对元素应用阴影。

使用CSS3阴影

CSS3可以让你在不使用任何图像的情况下为元素添加阴影效果,就像你在Photoshop中所做的那样。在CSS3之前,切片图像用于在元素周围创建阴影,这是非常烦人的。

下面的部分将描述如何将阴影应用到文本和元素上。

CSS3 box-shadow属性

box-shadow属性可用于向元素的框中添加阴影,您甚至可以使用逗号分隔的阴影列表应用多个阴影效果,创建方框阴影的基本语法如下:

box-shadow: offset-x offset-y blur-radius color;

box-shadow属性的组件有以下含义:

  • offset-x – 设置阴影的水平偏移量。
  • offset-y – 设置阴影的垂直偏移量。
  • blur-radius – 设置模糊半径。值越大,模糊就越大,阴影的边缘就越模糊。不允许有负值。
  • color – 设置阴影的颜色。如果颜色值被省略或未指定,它将获取color属性的值。

请参阅CSS3 box-shadow属性以了解关于其他可能值的更多信息。

.box{
    width: 200px;
    height: 150px;
    background: #ccc;
    box-shadow: 5px 5px 10px #999;
}

注意: 添加box-shadow时,如果没有指定模糊半径组件的值,或者设置为0(0),阴影的边缘将是锐的。

类似地,你可以使用逗号分隔的列表添加多个框阴影:

.box{
    width: 200px;
    height: 150px;
    background: #000;
    box-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}

CSS3文本阴影text-shadow属性

可以使用text-shadow属性对文本应用阴影效果,您还可以使用与box-shadow相同的表示法将多个阴影应用于文本。

h1 {
    text-shadow: 5px 5px 10px #666;
}
h2 {
    text-shadow: 5px 5px 10px red, 10px 10px 20px yellow;
}
赞(0)
未经允许不得转载:srcmini » css3阴影shadow – CSS3高级教程

评论 抢沙发

评论前必须登录!