Box-shadow应用

Box-shadow:inset是内阴影(写前写后都可以)
outset是外阴影
第一个值是水平偏移量
第二个值是垂直偏移量
第三个值是基于两边边框同时模糊
第四个值基于边框同时放大xxxpx
第五个值时阴影颜色
那么怎样才能画出一个色彩斑斓的球体呢?
代码如下:

<div></div>
*{
    margin: 0px;
    padding: 0px;
}
 body{
    background-color:#000;
}
div{
    position: absolute;
    width: 200px;
    height: 200px;
    /* border: 1px solid #ccc; */
    top: calc(50% - 100px);
    left: calc(50% - 100px);
    border-radius:50%;

    box-shadow:inset 0px 0px 50px #fff,
               inset 10px 0px 80px #f0f,
               inset -10px 0px 80px #0ff,
               inset 10px 0px 180px #f0f,
               inset -10px 0px 180px #0ff,
               0px 0px 50px #fff,
               10px 0px 50px #0ff,
               -10px 0px 50px #f0f;
} 

image.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值