用法：
/** 属性：calc（expression）*/ 宽度：calc（100％ - 34px）;
除了减法，还可以用 +（加） ，/(除) ， *（乘）。但要注意的是：
注意： +和-运算符在运算符和值之间需要一个空格。例如，它将被calc(50% -8px)解释为百分比，后跟负像素长度。只有在-到8px之间有空格时，才可以正确减法：
calc(50% - 8px) 空格在乘法或除法中不起作用，但建议阅读时要注意。
浏览器兼容性：
滚动条
.scroll-container { height: 250px; border: 1px solid #ddd; padding: 15px; overflow: auto; .row { margin: 0; line-height: 1.5; } &::-webkit-scrollbar { width: 8px; background: white; } &::-webkit-scrollbar-corner, /* 滚动条角落 */ &::-webkit-scrollbar-thumb, &::-webkit-scrollbar-track { border-radius: 4px; } &::-webkit-scrollbar-corner, &::-webkit-scrollbar-track { /* 滚动条轨道 */ background-color: rgba(180, 160, 120, 0.1); box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5); } &::-webkit-scrollbar-thumb { /* 滚动条手柄 */ background-color: #00adb5; } }
卡券效果
.coupon{ width: 300px; height: 100px; position: relative; background: radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right /50% 51px no-repeat, radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px no-repeat, radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px no-repeat, radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2)); }
阴影效果
// 三角形阴影 .shadow-triangle{ width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent rgb(245, 129, 127) transparent; filter:drop-shadow(10px 0px 10px rgba(238, 125, 55,0.5)); } // 缺圆投影 .circle-square{ width:100px; height:50px; line-height: 50px; background: radial-gradient(circle at bottom right, transparent 20px, rgb(245, 129, 127) 15px); filter: drop-shadow(2px 2px 2px rgba(238, 132, 66, 0.9)); } // 气泡阴影 .tip { width: 100px; height: 30px; line-height: 30px; border: 1px solid rgb(245, 129, 127); border-radius: 4px; position: relative; background-color: #fff; filter: drop-shadow(0px 2px 4px rgba(245, 129, 127, 0.9)); &::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #fff transparent; position: absolute; top: -10px; left: 0; right: 0; margin: auto; z-index: 2; } &::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent rgb(245, 129, 127) transparent; position: absolute; top: -11px; left: 0; right: 0; margin: auto; z-index: 1; } }
等高布局
没有什么是一个flex搞不定的。
.parent{ display: flex; }
如果一行放不下，可以折行。
.parent{ flex-wrap: wrap; }
总结
上面是一些静态的样式，还有一些更好玩的动态样式，希望有机会与大家分享~
