xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

css3 & box-shadow

css3 & box-shadow

box-shadow

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

https://css-tricks.com/almanac/properties/b/box-shadow/

https://css-tricks.com/snippets/css/css-box-shadow/

https://cssreference.io/property/box-shadow/

http://www.css3.info/preview/box-shadow/

https://www.cssmatic.com/box-shadow

https://tailwindcss.com/docs/box-shadow/

https://html-css-js.com/css/generator/box-shadow/


@charset "UTf-8";

/* business.css */

.business-container{
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: calc(6.7rem);
    height: calc(1.86rem);
    background:rgba(70,165,255,1);
    box-shadow: 0rem 0.04rem 0.08rem 0rem rgba(15,21,33,0.2);
    border-radius: 0.12rem;
    margin-left: 0.2rem;
    margin-top: 0.2rem;
    border-radius: 0.08rem;
    /* 62 28 */
    transform: translateX(-0.2rem);
    color:#fff;
}


.business-container-self{
    background:linear-gradient(270deg,rgba(75,151,250,1) 0%,rgba(35,106,255,1) 100%);
    color:rgba(48,48,61,1);
    box-shadow: 0rem 0.04rem 0.08rem 0rem rgba(15,21,33,0.2);
    /* transform: translateX(0); */
}

.business-container-white{
    background:rgba(255,255,255,1);
    color:rgba(48,48,61,1);
}




posted @   xgqfrms  阅读(195)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)
历史上的今天:
2018-07-04 Linux shell command symbolic link & soft link All In One
2016-07-04 Explore and Master Chrome DevTools :: chrome console api
2016-07-04 CVS、SVN、Git、GitHub :版本控制系统
点击右上角即可分享
微信分享提示