阿里大牛纯CSS实现了常见的UI效果，不信你看( 二 ) _CSS

注意到有一行代码transform: scaleX(-1);，这起到了水平翻转的作用，它可以防止再写一遍clip-path
demo地址：https://codepen.io/alphardex/pen/OJRvaaR
浮雕效果

文章插图

通过仔细观察，你会发现这是由2个同心的元素组成的，于是自然就想到了inset这个Mixin 。
创建了2个同心元素后，就要想办法来创建它们的浮雕光泽了。这里的光泽可以用box-shadow来实现，通过叠加多重阴影，我们就能模拟出浮雕的效果了

<div class="px-6 py-2 text-xl embossed cursor-pointer" data-text="浮雕按钮" style="--emboss-radius: 1.5rem">浮雕按钮</div>

:root {--red-color-1: #af2222;--red-color-2: #c1423e;--red-color-3: #c62a2a;--red-color-4: #951110;--green-color-1: #486433;--green-color-2: #2b361a;--red-grad-1: linear-gradient(to right,var(--red-color-1) 50%,var(--red-color-2) 0);}.embossed {--emboss-radius: 1rem;--emboss-out: 6px;--emboss-out-minus: calc(var(--emboss-out) * -1);--emboss-inset: 2px;--emboss-inset-minus: calc(var(--emboss-inset) * -1);--emboss-blur: 1px;--emboss-bg-1: var(--red-color-3);--emboss-bg-2: var(--green-color-1);--emboss-color-1: white;--emboss-color-2: var(--red-color-4);--emboss-color-3: var(--green-color-2);position: relative;box-sizing: border-box;white-space: nowrap;&::before {@include inset(var(--emboss-out-minus));content: "";background: var(--emboss-bg-1);box-shadow: inset var(--emboss-inset-minus) var(--emboss-inset-minus)var(--emboss-blur) var(--emboss-color-1),inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)var(--emboss-color-2);border-radius: calc(var(--emboss-radius) + var(--emboss-out));}&::after {@include inset;@include flex-center;content: attr(data-text);color: white;font-weight: bold;background: var(--emboss-bg-2);box-shadow: inset var(--emboss-inset) var(--emboss-inset) var(--emboss-blur)var(--emboss-color-1),inset var(--emboss-inset-minus) var(--emboss-inset-minus)var(--emboss-blur) var(--emboss-color-3);border-radius: var(--emboss-radius);}}

demo地址：https://codepen.io/alphardex/pen/poEEERM?editors=0110

【阿里大牛纯CSS实现了常见的UI效果，不信你看】