inherit
指定一个属性应从父元素继承它的值
div{ color:#fff000}div>a{ color:inherit}background-clip
background-clip: border-box|padding-box|content-box
border-box 默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box 背景绘制在衬距方框内（剪切成衬距方框）。
content-box 背景绘制在内容方框内（剪切成内容方框）。
解决半透明边框，被背景图片所笼罩
div{ width:100px; height:100px; background:rgb(255,240,0,1); border:10px solid rgb(255,240,0,0.5); background-clip: padding-box; }box-shadow
box-shadow: h-shadow v-shadow blur spread color inset
_h-shadow_: 必须的。程度暗影的地位。容许负值
_v-shadow_: 必须的。垂直暗影的地位。容许负值
_blur_: 可选。含糊间隔
_spread_: 可选。暗影的大小
_color_: 可选。暗影的色彩。
inset: 可选。从外层的暗影（开始时）扭转暗影内侧暗影
多重暗影
div{ width:100px; height:100px; border-radius: 50%; box-shadow: 10px 10px 0px 10px red, 20px 20px 0px 20px blue, 30px 30px 0px 30px yellow, 40px 40px 0px 40px green; margin:auto; margin-top:200px; }outline
outline: outline-color outline-style outline-width
绘制于元素四周的一条线，位于边框边缘的外围，可起到突出元素的作用
_outline-color_: 规定边框的色彩
_outline-style_: 规定边框的款式
_outline-width_: 规定边框的宽度
双边框，通常里面是实线边框，外面为点边框
div{ width:100px; height:100px; border:5px solid red; outline: 1px dashed red; outline-offset: -10px; }双边框，通常里面是实线边框，外面为圆角边框
div{ width:100px; height:100px; border:2px solid red; border-radius: 10px; outline: 6px solid red; box-shadow: 0 0 0 4px red; }clip-path
circle|ellipse|polygon
circle: 圆
ellipse: (椭圆的X轴半径 椭圆的Y轴半径 at 椭圆核心地位)
polygon: (上，右，下，左)每个点，由x方向和y方向组成
平行四边形和菱形
.diamond>div{ width: 150px; height:70px; color: white; justify-content: center; align-items: center; position: relative;}.diamond>div:nth-of-type(1)::before{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: -1; transform: skewX(-45deg); background: #b4a078;}.diamond>div:nth-of-type(2){ clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); transition: 1s clip-path; background: #b4a078;}.diamond>div:nth-of-type(2):hover{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}进度条
.outer{ width:60%; height:20px; border-radius: 10px; overflow: hidden; position: relative; } .enter{ height:inherit; background:rgba(180, 160, 120, .2); } .bg{ width:60%; height: inherit; border-radius: 8px; background: repeating-linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%, #D9CFBB 0, #D9CFBB 75%, #C3B393 0); background-size:20px 20px; animation: panoramic 20s linear infinite; } @keyframes panoramic{ to{ background-position: 200% 0; } }不规则卡片
div{ width: 200px; height: 120px; background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 21px); }