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);
}