css inset默认值,测试CSS3 clip-path属性的不同inset值的效果

CSS

语言：

CSSSCSS

确定

.test {

float: left;

overflow: hidden;

position: relative;

margin: .25em;

height: 14em;

width: 27em;

box-shadow: 0 0 .125em #777;

font: 1em/14 monospace;

text-align: center;

white-space: pre-wrap;

}

.test:before,

.test:after {

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

}

.test:before {

box-sizing: border-box;

border: solid 1em #c73a11;

padding: 1em;

background: #ddd;

background-clip: content-box;

content: '';

}

.test--clip-path-inset:nth-child(1):after {

content: 'no clipping applied';

}

.test--clip-path-inset:nth-child(2) {

/* all (top, right, bottom, left) */

}

.test--clip-path-inset:nth-child(2):before {

-webkit-clip-path: inset(8px);

}

.test--clip-path-inset:nth-child(2):after {

content: "inset(8px)";

}

.test--clip-path-inset:nth-child(3):before {

-webkit-clip-path: inset(-1em 15%);

}

.test--clip-path-inset:nth-child(3):after {

content: "inset(-1em 15%)";

}

.test--clip-path-inset:nth-child(4):before {

-webkit-clip-path: inset(-1em 2vw calc(50% - 1vmin));

}

.test--clip-path-inset:nth-child(4):after {

content: "inset(-1em 2vw calc(50% - 1vmin))";

}

.test--clip-path-inset:nth-child(5):before {

-webkit-clip-path: inset(4vh 15% 3vh -1vmax);

}

.test--clip-path-inset:nth-child(5):after {

content: "inset(4vh 15% 3vh -1vmax)";

}

.test--clip-path-inset:nth-child(6) {

/* 50% top + 50% bottom = 100% height */

}

.test--clip-path-inset:nth-child(6):before {

-webkit-clip-path: inset(50% 1px);

}

.test--clip-path-inset:nth-child(6):after {

content: "inset(50% 1px)";

}

.test--clip-path-inset:nth-child(7) {

/* calc(50% + 30vmin) right + calc(50% + 30vmin) left > 100% width */

}

.test--clip-path-inset:nth-child(7):before {

-webkit-clip-path: inset(-1em calc(50% + 30vmin));

}

.test--clip-path-inset:nth-child(7):after {

content: "inset(-1em calc(50% + 30vmin))";

}

.test--clip-path-inset:nth-child(8) {

/* basic usage */

}

.test--clip-path-inset:nth-child(8):before {

-webkit-clip-path: inset(3em round 1em);

}

.test--clip-path-inset:nth-child(8):after {

content: "inset(3em round 1em)";

}

.test--clip-path-inset:nth-child(9) {

/* with negative insets */

}

.test--clip-path-inset:nth-child(9):before {

-webkit-clip-path: inset(-1em round 50%);

}

.test--clip-path-inset:nth-child(9):after {

content: "inset(-1em round 50%)";

}

.test--clip-path-inset:nth-child(10):before {

-webkit-clip-path: inset(2vw round calc(50% - 8px) 3em);

}

.test--clip-path-inset:nth-child(10):after {

content: "inset(2vw round calc(50% - 8px) 3em)";

}

.test--clip-path-inset:nth-child(11):before {

-webkit-clip-path: inset(0 round 50% 1.5em 0);

}

.test--clip-path-inset:nth-child(11):after {

content: "inset(0 round 50% 1.5em 0)";

}

.test--clip-path-inset:nth-child(12):before {

-webkit-clip-path: inset(0 round 50% 5em 0 8px);

}

.test--clip-path-inset:nth-child(12):after {

content: "inset(0 round 50% 5em 0 8px)";

}

.test--clip-path-inset:nth-child(13):before {

-webkit-clip-path: inset(0 2.5em round 5em/50%);

}

.test--clip-path-inset:nth-child(13):after {

content: "inset(0 2.5em round 5em/50%)";

}

.test--clip-path-inset:nth-child(14) {

/*mix them*/

}

.test--clip-path-inset:nth-child(14):before {

-webkit-clip-path: inset(20px 2em round 8em/65% 0 4vw);

}

.test--clip-path-inset:nth-child(14):after {

content: "inset(20px 2em round 8em/65% 0 4vw)";

}