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

}

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

html css动画自动旋转,不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
css做喇叭动画,使用CSS3模拟音箱（音响）声音扩展动画效果
CSS 语言: CSSSCSS 确定 @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300); * { ...
不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
java set循环取值_java循环遍历类属性 get 和set值方法
//遍历sqspb类成员为String类型属性为空的全部替换为"/" Field[] fields = sqspb.getClass().getDeclaredFields() ...
css inset默认值,css中的inset/inset-inline/inset-block
css中当我们设置position:absolute的时候,一般都会去设置它的left/right/bottom/top,但是最近我看到chrome上,将left/right/bottom/top信息 ...
css中默认值的灰色rgb_rgb（）函数以及CSS中的示例
css中默认值的灰色rgb Introduction: 介绍: Functions and properties go hand in hand while developing a website ...
C++：实现量化Nth-to-default第N个默认值测试实例
C++:实现量化Nth-to-default第N个默认值测试实例 #include "nthtodefault.hpp" #include "utilities.hpp& ...
什css3新增的属性,CSS
1.文本阴影属性 text-shadow:10px 10px 10px red; 注: 第一个值 : 水平方向的距离 (必须有的:支持负值) 第二个值 : 垂直方向的距离 (必须有的:支持负值) 第三 ...
将CSS CLIP属性应用在：扩展覆盖效果
日期:2013-3-18 来源:GBin1.com 在线演示我们想要展示如何利用CSS3 clip属性制作一种简单而整洁的扩展效果,当点击一个box元素时实现平稳过渡.这个想法是为了实现某种叠加 ...

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

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

最新文章

热门文章