随笔 - 112  文章 - 1  评论 - 2  阅读 - 23897

CSS3 box-shadow盒子阴影

inset | offset-x | offset-y | blur-radius | spread-radius | color

阴影在边框内 x轴 y轴 模糊半径 扩散半径 阴影颜色

inset: 默认阴影在边框外。使用 inset 后,阴影在边框内

offset-x:水平偏移量:(如果是负值则阴影位于元素左边)

offset-y:垂直偏移量:(如果是负值则阴影位于元素上面)

offset-x和offset-y 两者都是0,那么阴影位于元素后面

blur-radius:值越大,模糊面积越大,阴影就越大越淡。 不能为负值(默认为0,此时阴影边缘锐利。)

spread-radius: 取正值时,阴影扩大;取负值时,阴影收缩(默认为0,此时阴影与元素同样大。)

/* x轴 y轴 阴影颜色*/
box-shadow: 6px -5px #ccc;
/* x轴 y轴 模糊半径 阴影颜色*/
box-shadow: 6px -5px 5px red;
/* x轴 y轴 模糊半径 扩散半径 阴影颜色*/
box-shadow: 1px 1px -5px 2px red;
/* inset: 阴影在边框内 */
box-shadow: inset -10px 1px 3px red;
posted on   Steven_YF  阅读(28)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
历史上的今天:
2021-03-09 TCP/IP的四元组、五元组、七元组
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示