CSS3 Box 盒子阴影 |
您所在的位置:网站首页 › 阴影的效果 › CSS3 Box 盒子阴影 |
❮ 上一节
下一节 ❯
CSS3 Box 盒子阴影
CSS3 box-shadow 属性
CSS box-shadow 属性应用阴影于元素。 最简单的用法是只指定水平阴影和垂直阴影: 带有黑色 box-shadow 的黄色 元素 实例 div { box-shadow: 10px 10px; } 亲自试一试 »接下来,为阴影添加颜色: 带有灰色 box-shadow 的黄色 元素 实例 div { box-shadow: 10px 10px grey; } 亲自试一试 »接下来,向阴影添加模糊效果: 黄色的 元素,带有模糊的 box-shadow 实例 div { box-shadow: 10px 10px 5px grey; } 亲自试一试 » 卡片您还可以使用 box-shadow 属性创建纸质卡片效果: 1January 1, 2016 Hardanger, Norway 实例 div.card { width: 250px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); text-align: center; } Try it (Text Card) » Try it (Image Card) » CSS3 习题和测验 测验 1 » 测验 2 » 测验 3 » 测验 4 » 测验 5 » CSS3 阴影属性下表列出了 CSS 的阴影属性: 属性 描述 box-shadow 向一个元素添加一个或多个阴影。 text-shadow 在文本中添加一个或多个阴影。 ❮ 上一节 下一节 ❯ |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |