轩枫阁

首页 / Web前端 / CSS / CSS3 box-shadow快速教程

CSS3 box-shadow快速教程

前言

形象生动的动画展示box-shadow用法。

简介

box-shadow 属性向框添加一个或多个阴影。这个CSS3的属性很常用,盒阴影、按钮状态等各种地方都有用到,但是你了解并记住各个参数的作用及用法吗?

展示

源码:http://codepen.io/yisi/pen/sDBwC

语法:http://www.w3cplus.com/content/css3-box-shadow

动图:

c1608aa0gw1e9pb1vvnbfg20by08wjzh

使用技巧

第一个值控制水平偏移,正值向右,负值向左

第二个值控制垂直偏移,正值向下,负值向上

第三个值控制模糊半径,不允许负值,数值越大阴影的边缘越模糊

第四个值控制扩展范围

最后一个值控制阴影颜色,省略则继承color 属性的颜色

可以添加多个阴影,用逗号隔开

可以使用inset设置内阴影

你会了吗?

本文标题:CSS3 box-shadow快速教程 - 轩枫阁

转载请务必注明出处,欢迎分享

如果觉得我的文章对您有用,欢迎打赏
赞  赏
赞赏作者 urnotivan
¥ 6.66
换个金额 使用微信扫一扫赞赏
  • 6.66
  • 8.88
  • 16.8
  • 2.33
  • 52.0
  • 20.0
  • 自定义
  • 10.0
233/470
235/470

相关阅读

文章评论

  • 暂无评论

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子