UNPKG

@shixinde/guoguo-style

Version:

果锅样式库

2,303 lines (1,757 loc) 21.5 kB
/** * 上边距 margin-top * * @format */ .mgt-0 { margin-top: 0px; } .mgt-2 { margin-top: 2px; } .mgt-4 { margin-top: 4px; } .mgt-6 { margin-top: 6px; } .mgt-8 { margin-top: 8px; } .mgt-10 { margin-top: 10px; } .mgt-12 { margin-top: 12px; } .mgt-14 { margin-top: 14px; } .mgt-16 { margin-top: 16px; } .mgt-18 { margin-top: 18px; } .mgt-20 { margin-top: 20px; } .mgt-22 { margin-top: 22px; } .mgt-24 { margin-top: 24px; } .mgt-26 { margin-top: 26px; } .mgt-28 { margin-top: 28px; } .mgt-30 { margin-top: 30px; } .mgt-32 { margin-top: 32px; } .mgt-34 { margin-top: 34px; } .mgt-36 { margin-top: 36px; } .mgt-38 { margin-top: 38px; } .mgt-40 { margin-top: 40px; } .mgt-42 { margin-top: 42px; } .mgt-44 { margin-top: 44px; } .mgt-46 { margin-top: 46px; } .mgt-48 { margin-top: 48px; } .mgt-50 { margin-top: 50px; } .mgt-52 { margin-top: 52px; } .mgt-54 { margin-top: 54px; } .mgt-56 { margin-top: 56px; } .mgt-58 { margin-top: 58px; } .mgt-60 { margin-top: 60px; } .mgt-62 { margin-top: 62px; } .mgt-64 { margin-top: 64px; } .mgt-66 { margin-top: 66px; } .mgt-68 { margin-top: 68px; } .mgt-70 { margin-top: 70px; } .mgt-72 { margin-top: 72px; } .mgt-74 { margin-top: 74px; } .mgt-76 { margin-top: 76px; } .mgt-78 { margin-top: 78px; } .mgt-80 { margin-top: 80px; } .mgt-82 { margin-top: 82px; } .mgt-84 { margin-top: 84px; } .mgt-86 { margin-top: 86px; } .mgt-88 { margin-top: 88px; } .mgt-90 { margin-top: 90px; } .mgt-92 { margin-top: 92px; } .mgt-94 { margin-top: 94px; } .mgt-96 { margin-top: 96px; } .mgt-98 { margin-top: 98px; } .mgt-100 { margin-top: 100px; } /* 右边距 margin-right */ .mgr-0 { margin-right: 0px; } .mgr-2 { margin-right: 2px; } .mgr-4 { margin-right: 4px; } .mgr-6 { margin-right: 6px; } .mgr-8 { margin-right: 8px; } .mgr-10 { margin-right: 10px; } .mgr-12 { margin-right: 12px; } .mgr-14 { margin-right: 14px; } .mgr-16 { margin-right: 16px; } .mgr-18 { margin-right: 18px; } .mgr-20 { margin-right: 20px; } .mgr-22 { margin-right: 22px; } .mgr-24 { margin-right: 24px; } .mgr-26 { margin-right: 26px; } .mgr-28 { margin-right: 28px; } .mgr-30 { margin-right: 30px; } .mgr-32 { margin-right: 32px; } .mgr-34 { margin-right: 34px; } .mgr-36 { margin-right: 36px; } .mgr-38 { margin-right: 38px; } .mgr-40 { margin-right: 40px; } .mgr-42 { margin-right: 42px; } .mgr-44 { margin-right: 44px; } .mgr-46 { margin-right: 46px; } .mgr-48 { margin-right: 48px; } .mgr-50 { margin-right: 50px; } .mgr-52 { margin-right: 52px; } .mgr-54 { margin-right: 54px; } .mgr-56 { margin-right: 56px; } .mgr-58 { margin-right: 58px; } .mgr-60 { margin-right: 60px; } .mgr-62 { margin-right: 62px; } .mgr-64 { margin-right: 64px; } .mgr-66 { margin-right: 66px; } .mgr-68 { margin-right: 68px; } .mgr-70 { margin-right: 70px; } .mgr-72 { margin-right: 72px; } .mgr-74 { margin-right: 74px; } .mgr-76 { margin-right: 76px; } .mgr-78 { margin-right: 78px; } .mgr-80 { margin-right: 80px; } .mgr-82 { margin-right: 82px; } .mgr-84 { margin-right: 84px; } .mgr-86 { margin-right: 86px; } .mgr-88 { margin-right: 88px; } .mgr-90 { margin-right: 90px; } .mgr-92 { margin-right: 92px; } .mgr-94 { margin-right: 94px; } .mgr-96 { margin-right: 96px; } .mgr-98 { margin-right: 98px; } .mgr-100 { margin-right: 100px; } /* 下边距 margin-bottom */ .mgb-0 { margin-bottom: 0px; } .mgb-2 { margin-bottom: 2px; } .mgb-4 { margin-bottom: 4px; } .mgb-6 { margin-bottom: 6px; } .mgb-8 { margin-bottom: 8px; } .mgb-10 { margin-bottom: 10px; } .mgb-12 { margin-bottom: 12px; } .mgb-14 { margin-bottom: 14px; } .mgb-16 { margin-bottom: 16px; } .mgb-18 { margin-bottom: 18px; } .mgb-20 { margin-bottom: 20px; } .mgb-22 { margin-bottom: 22px; } .mgb-24 { margin-bottom: 24px; } .mgb-26 { margin-bottom: 26px; } .mgb-28 { margin-bottom: 28px; } .mgb-30 { margin-bottom: 30px; } .mgb-32 { margin-bottom: 32px; } .mgb-34 { margin-bottom: 34px; } .mgb-36 { margin-bottom: 36px; } .mgb-38 { margin-bottom: 38px; } .mgb-40 { margin-bottom: 40px; } .mgb-42 { margin-bottom: 42px; } .mgb-44 { margin-bottom: 44px; } .mgb-46 { margin-bottom: 46px; } .mgb-48 { margin-bottom: 48px; } .mgb-50 { margin-bottom: 50px; } .mgb-52 { margin-bottom: 52px; } .mgb-54 { margin-bottom: 54px; } .mgb-56 { margin-bottom: 56px; } .mgb-58 { margin-bottom: 58px; } .mgb-60 { margin-bottom: 60px; } .mgb-62 { margin-bottom: 62px; } .mgb-64 { margin-bottom: 64px; } .mgb-66 { margin-bottom: 66px; } .mgb-68 { margin-bottom: 68px; } .mgb-70 { margin-bottom: 70px; } .mgb-72 { margin-bottom: 72px; } .mgb-74 { margin-bottom: 74px; } .mgb-76 { margin-bottom: 76px; } .mgb-78 { margin-bottom: 78px; } .mgb-80 { margin-bottom: 80px; } .mgb-82 { margin-bottom: 82px; } .mgb-84 { margin-bottom: 84px; } .mgb-86 { margin-bottom: 86px; } .mgb-88 { margin-bottom: 88px; } .mgb-90 { margin-bottom: 90px; } .mgb-92 { margin-bottom: 92px; } .mgb-94 { margin-bottom: 94px; } .mgb-96 { margin-bottom: 96px; } .mgb-98 { margin-bottom: 98px; } .mgb-100 { margin-bottom: 100px; } /* 左边距 margin-left */ .mgl-0 { margin-left: 0px; } .mgl-2 { margin-left: 2px; } .mgl-4 { margin-left: 4px; } .mgl-6 { margin-left: 6px; } .mgl-8 { margin-left: 8px; } .mgl-10 { margin-left: 10px; } .mgl-12 { margin-left: 12px; } .mgl-14 { margin-left: 14px; } .mgl-16 { margin-left: 16px; } .mgl-18 { margin-left: 18px; } .mgl-20 { margin-left: 20px; } .mgl-22 { margin-left: 22px; } .mgl-24 { margin-left: 24px; } .mgl-26 { margin-left: 26px; } .mgl-28 { margin-left: 28px; } .mgl-30 { margin-left: 30px; } .mgl-32 { margin-left: 32px; } .mgl-34 { margin-left: 34px; } .mgl-36 { margin-left: 36px; } .mgl-38 { margin-left: 38px; } .mgl-40 { margin-left: 40px; } .mgl-42 { margin-left: 42px; } .mgl-44 { margin-left: 44px; } .mgl-46 { margin-left: 46px; } .mgl-48 { margin-left: 48px; } .mgl-50 { margin-left: 50px; } .mgl-52 { margin-left: 52px; } .mgl-54 { margin-left: 54px; } .mgl-56 { margin-left: 56px; } .mgl-58 { margin-left: 58px; } .mgl-60 { margin-left: 60px; } .mgl-62 { margin-left: 62px; } .mgl-64 { margin-left: 64px; } .mgl-66 { margin-left: 66px; } .mgl-68 { margin-left: 68px; } .mgl-70 { margin-left: 70px; } .mgl-72 { margin-left: 72px; } .mgl-74 { margin-left: 74px; } .mgl-76 { margin-left: 76px; } .mgl-78 { margin-left: 78px; } .mgl-80 { margin-left: 80px; } .mgl-82 { margin-left: 82px; } .mgl-84 { margin-left: 84px; } .mgl-86 { margin-left: 86px; } .mgl-88 { margin-left: 88px; } .mgl-90 { margin-left: 90px; } .mgl-92 { margin-left: 92px; } .mgl-94 { margin-left: 94px; } .mgl-96 { margin-left: 96px; } .mgl-98 { margin-left: 98px; } .mgl-100 { margin-left: 100px; } /* margin */ .mg-0 { margin: 0px; } .mg-2 { margin: 2px; } .mg-4 { margin: 4px; } .mg-6 { margin: 6px; } .mg-8 { margin: 8px; } .mg-10 { margin: 10px; } .mg-12 { margin: 12px; } .mg-14 { margin: 14px; } .mg-16 { margin: 16px; } .mg-18 { margin: 18px; } .mg-20 { margin: 20px; } .mg-22 { margin: 22px; } .mg-24 { margin: 24px; } .mg-26 { margin: 26px; } .mg-28 { margin: 28px; } .mg-30 { margin: 30px; } .mg-32 { margin: 32px; } .mg-34 { margin: 34px; } .mg-36 { margin: 36px; } .mg-38 { margin: 38px; } .mg-40 { margin: 40px; } .mg-42 { margin: 42px; } .mg-44 { margin: 44px; } .mg-46 { margin: 46px; } .mg-48 { margin: 48px; } .mg-50 { margin: 50px; } /* 上内边距 padding-top */ .pt-0 { padding-top: 0px; } .pt-2 { } /* 上内边距 padding-top */ .pdt-0 { padding-top: 0px; } .pdt-2 { padding-top: 2px; } .pdt-4 { padding-top: 4px; } .pdt-6 { padding-top: 6px; } .pdt-8 { padding-top: 8px; } .pdt-10 { padding-top: 10px; } .pdt-12 { padding-top: 12px; } .pdt-14 { padding-top: 14px; } .pdt-16 { padding-top: 16px; } .pdt-18 { padding-top: 18px; } .pdt-20 { padding-top: 20px; } .pdt-22 { padding-top: 22px; } .pdt-24 { padding-top: 24px; } .pdt-26 { padding-top: 26px; } .pdt-28 { padding-top: 28px; } .pdt-30 { padding-top: 30px; } .pdt-32 { padding-top: 32px; } .pdt-34 { padding-top: 34px; } .pdt-36 { padding-top: 36px; } .pdt-38 { padding-top: 38px; } .pdt-40 { padding-top: 40px; } .pdt-42 { padding-top: 42px; } .pdt-44 { padding-top: 44px; } .pdt-46 { padding-top: 46px; } .pdt-48 { padding-top: 48px; } .pdt-50 { padding-top: 50px; } .pdt-52 { padding-top: 52px; } .pdt-54 { padding-top: 54px; } .pdt-56 { padding-top: 56px; } .pdt-58 { padding-top: 58px; } .pdt-60 { padding-top: 60px; } .pdt-62 { padding-top: 62px; } .pdt-64 { padding-top: 64px; } .pdt-66 { padding-top: 66px; } .pdt-68 { padding-top: 68px; } .pdt-70 { padding-top: 70px; } .pdt-72 { padding-top: 72px; } .pdt-74 { padding-top: 74px; } .pdt-76 { padding-top: 76px; } .pdt-78 { padding-top: 78px; } .pdt-80 { padding-top: 80px; } .pdt-82 { padding-top: 82px; } .pdt-84 { padding-top: 84px; } .pdt-86 { padding-top: 86px; } .pdt-88 { padding-top: 88px; } .pdt-90 { padding-top: 90px; } .pdt-92 { padding-top: 92px; } .pdt-94 { padding-top: 94px; } .pdt-96 { padding-top: 96px; } .pdt-98 { padding-top: 98px; } .pdt-100 { padding-top: 100px; } /* 右内边距 padding-right */ .pdr-0 { padding-right: 0px; } .pdr-2 { padding-right: 2px; } .pdr-4 { padding-right: 4px; } .pdr-6 { padding-right: 6px; } .pdr-8 { padding-right: 8px; } .pdr-10 { padding-right: 10px; } .pdr-12 { padding-right: 12px; } .pdr-14 { padding-right: 14px; } .pdr-16 { padding-right: 16px; } .pdr-18 { padding-right: 18px; } .pdr-20 { padding-right: 20px; } .pdr-22 { padding-right: 22px; } .pdr-24 { padding-right: 24px; } .pdr-26 { padding-right: 26px; } .pdr-28 { padding-right: 28px; } .pdr-30 { padding-right: 30px; } .pdr-32 { padding-right: 32px; } .pdr-34 { padding-right: 34px; } .pdr-36 { padding-right: 36px; } .pdr-38 { padding-right: 38px; } .pdr-40 { padding-right: 40px; } .pdr-42 { padding-right: 42px; } .pdr-44 { padding-right: 44px; } .pdr-46 { padding-right: 46px; } .pdr-48 { padding-right: 48px; } .pdr-50 { padding-right: 50px; } .pdr-52 { padding-right: 52px; } .pdr-54 { padding-right: 54px; } .pdr-56 { padding-right: 56px; } .pdr-58 { padding-right: 58px; } .pdr-60 { padding-right: 60px; } .pdr-62 { padding-right: 62px; } .pdr-64 { padding-right: 64px; } .pdr-66 { padding-right: 66px; } .pdr-68 { padding-right: 68px; } .pdr-70 { padding-right: 70px; } .pdr-72 { padding-right: 72px; } .pdr-74 { padding-right: 74px; } .pdr-76 { padding-right: 76px; } .pdr-78 { padding-right: 78px; } .pdr-80 { padding-right: 80px; } .pdr-82 { padding-right: 82px; } .pdr-84 { padding-right: 84px; } .pdr-86 { padding-right: 86px; } .pdr-88 { padding-right: 88px; } .pdr-90 { padding-right: 90px; } .pdr-92 { padding-right: 92px; } .pdr-94 { padding-right: 94px; } .pdr-96 { padding-right: 96px; } .pdr-98 { padding-right: 98px; } .pdr-100 { padding-right: 100px; } /* 下内边距 padding-bottom */ .pdb-0 { padding-bottom: 0px; } .pdb-2 { padding-bottom: 2px; } .pdb-4 { padding-bottom: 4px; } .pdb-6 { padding-bottom: 6px; } .pdb-8 { padding-bottom: 8px; } .pdb-10 { padding-bottom: 10px; } .pdb-12 { padding-bottom: 12px; } .pdb-14 { padding-bottom: 14px; } .pdb-16 { padding-bottom: 16px; } .pdb-18 { padding-bottom: 18px; } .pdb-20 { padding-bottom: 20px; } .pdb-22 { padding-bottom: 22px; } .pdb-24 { padding-bottom: 24px; } .pdb-26 { padding-bottom: 26px; } .pdb-28 { padding-bottom: 28px; } .pdb-30 { padding-bottom: 30px; } .pdb-32 { padding-bottom: 32px; } .pdb-34 { padding-bottom: 34px; } .pdb-36 { padding-bottom: 36px; } .pdb-38 { padding-bottom: 38px; } .pdb-40 { padding-bottom: 40px; } .pdb-42 { padding-bottom: 42px; } .pdb-44 { padding-bottom: 44px; } .pdb-46 { padding-bottom: 46px; } .pdb-48 { padding-bottom: 48px; } .pdb-50 { padding-bottom: 50px; } .pdb-52 { padding-bottom: 52px; } .pdb-54 { padding-bottom: 54px; } .pdb-56 { padding-bottom: 56px; } .pdb-58 { padding-bottom: 58px; } .pdb-60 { padding-bottom: 60px; } .pdb-62 { padding-bottom: 62px; } .pdb-64 { padding-bottom: 64px; } .pdb-66 { padding-bottom: 66px; } .pdb-68 { padding-bottom: 68px; } .pdb-70 { padding-bottom: 70px; } .pdb-72 { padding-bottom: 72px; } .pdb-74 { padding-bottom: 74px; } .pdb-76 { padding-bottom: 76px; } .pdb-78 { padding-bottom: 78px; } .pdb-80 { padding-bottom: 80px; } .pdb-82 { padding-bottom: 82px; } .pdb-84 { padding-bottom: 84px; } .pdb-86 { padding-bottom: 86px; } .pdb-88 { padding-bottom: 88px; } .pdb-90 { padding-bottom: 90px; } .pdb-92 { padding-bottom: 92px; } .pdb-94 { padding-bottom: 94px; } .pdb-96 { padding-bottom: 96px; } .pdb-98 { padding-bottom: 98px; } .pdb-100 { padding-bottom: 100px; } /* 左内边距 padding-left */ .pdl-0 { padding-left: 0px; } .pdl-2 { padding-left: 2px; } .pdl-4 { padding-left: 4px; } .pdl-6 { padding-left: 6px; } .pdl-8 { padding-left: 8px; } .pdl-10 { padding-left: 10px; } .pdl-12 { padding-left: 12px; } .pdl-14 { padding-left: 14px; } .pdl-16 { padding-left: 16px; } .pdl-18 { padding-left: 18px; } .pdl-20 { padding-left: 20px; } .pdl-22 { padding-left: 22px; } .pdl-24 { padding-left: 24px; } .pdl-26 { padding-left: 26px; } .pdl-28 { padding-left: 28px; } .pdl-30 { padding-left: 30px; } .pdl-32 { padding-left: 32px; } .pdl-34 { padding-left: 34px; } .pdl-36 { padding-left: 36px; } .pdl-38 { padding-left: 38px; } .pdl-40 { padding-left: 40px; } .pdl-42 { padding-left: 42px; } .pdl-44 { padding-left: 44px; } .pdl-46 { padding-left: 46px; } .pdl-48 { padding-left: 48px; } .pdl-50 { padding-left: 50px; } .pdl-52 { padding-left: 52px; } .pdl-54 { padding-left: 54px; } .pdl-56 { padding-left: 56px; } .pdl-58 { padding-left: 58px; } .pdl-60 { padding-left: 60px; } .pdl-62 { padding-left: 62px; } .pdl-64 { padding-left: 64px; } .pdl-66 { padding-left: 66px; } .pdl-68 { padding-left: 68px; } .pdl-70 { padding-left: 70px; } .pdl-72 { padding-left: 72px; } .pdl-74 { padding-left: 74px; } .pdl-76 { padding-left: 76px; } .pdl-78 { padding-left: 78px; } .pdl-80 { padding-left: 80px; } .pdl-82 { padding-left: 82px; } .pdl-84 { padding-left: 84px; } .pdl-86 { padding-left: 86px; } .pdl-88 { padding-left: 88px; } .pdl-90 { padding-left: 90px; } .pdl-92 { padding-left: 92px; } .pdl-94 { padding-left: 94px; } .pdl-96 { padding-left: 96px; } .pdl-98 { padding-left: 98px; } .pdl-100 { padding-left: 100px; } /* padding */ .pd-0 { padding: 0px; } .pd-2 { padding: 2px; } .pd-4 { padding: 4px; } .pd-6 { padding: 6px; } .pd-8 { padding: 8px; } .pd-10 { padding: 10px; } .pd-12 { padding: 12px; } .pd-14 { padding: 14px; } .pd-16 { padding: 16px; } .pd-18 { padding: 18px; } .pd-20 { padding: 20px; } .pd-22 { padding: 22px; } .pd-24 { padding: 24px; } .pd-26 { padding: 26px; } .pd-28 { padding: 28px; } .pd-30 { padding: 30px; } .pd-32 { padding: 32px; } .pd-34 { padding: 34px; } .pd-36 { padding: 36px; } .pd-38 { padding: 38px; } .pd-40 { padding: 40px; } .pd-42 { padding: 42px; } .pd-44 { padding: 44px; } .pd-46 { padding: 46px; } .pd-48 { padding: 48px; } .pd-50 { padding: 50px; } /* Flex布局 */ .flex { display: flex; } .flex-column { flex-direction: column; } .column { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .flex-1 { flex: 1; } .flex1 { flex: 1; } .flex-2 { flex: 2; } .flex-3 { flex: 3; } /* 主轴对齐方式 */ .just-start { justify-content: flex-start; } .just-end { justify-content: flex-end; } .just-center { justify-content: center; } .space-between { justify-content: space-between; } .just-between { justify-content: space-between; } .just-around { justify-content: space-around; } .just-evenly { justify-content: space-evenly; } /* 交叉轴对齐方式 */ .align-start { align-items: flex-start; } .align-end { align-items: flex-end; } .align-center { align-items: center; } .align-stretch { align-items: stretch; } .align-baseline { align-items: baseline; } /* 常用组合 */ .flex-center { display: flex; justify-content: center; align-items: center; } .flex-between-center { display: flex; justify-content: space-between; align-items: center; } .flex-around-center { display: flex; justify-content: space-around; align-items: center; } /* 文本对齐 */ .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } /* 文本溢出处理 */ .text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .text-ellipsis-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .text-ellipsis-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* 遮罩效果 */ .mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; } .mask-light { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 999; } .mask-white { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.8); z-index: 999; } /* 常用动画效果 */ /* 淡入淡出 */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } .fade-in { animation: fadeIn 0.3s ease-in-out forwards; } .fade-out { animation: fadeOut 0.3s ease-in-out forwards; } /* 缩放 */ @keyframes zoomIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes zoomOut { from { transform: scale(1); opacity: 1; } to { transform: scale(0.5); opacity: 0; } } .zoom-in { animation: zoomIn 0.3s ease-in-out forwards; } .zoom-out { animation: zoomOut 0.3s ease-in-out forwards; } /* 滑动 */ @keyframes slideInFromTop { from { transform: translateY(-100%); } to { transform: translateY(0); } } @keyframes slideInFromBottom { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes slideInFromLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } } .slide-in-top { animation: slideInFromTop 0.3s ease-in-out forwards; } .slide-in-bottom { animation: slideInFromBottom 0.3s ease-in-out forwards; } .slide-in-left { animation: slideInFromLeft 0.3s ease-in-out forwards; } .slide-in-right { animation: slideInFromRight 0.3s ease-in-out forwards; } /* 旋转 */ @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .rotate { animation: rotate360 1s linear infinite; } /* 脉冲效果 */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { animation: pulse 1.5s ease-in-out infinite; } /* 阴影效果 */ .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } .shadow-md { box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .shadow-lg { box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .shadow-xl { box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); } /* 圆角 */ .rounded-sm { border-radius: 2px; } .rounded { border-radius: 4px; } .rounded-md { border-radius: 6px; } .rounded-lg { border-radius: 8px; } .rounded-xl { border-radius: 12px; } .rounded-full { border-radius: 9999px; } /* 过渡效果 */ .transition { transition: all 0.3s ease; } .transition-fast { transition: all 0.15s ease; } .transition-slow { transition: all 0.5s ease; } /* 鼠标指针 */ .cursor-pointer { cursor: pointer; } .cursor-not-allowed { cursor: not-allowed; } /* 位置 */ .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; } .sticky { position: sticky; } /* 显示与隐藏 */ .hidden { display: none; } .visible { visibility: visible; } .invisible { visibility: hidden; } /* 透明度 */ .opacity-0 { opacity: 0; } .opacity-25 { opacity: 0.25; } .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } .opacity-100 { opacity: 1; } .cursor { cursor: pointer; }