{
width: calc(100% + 20px);
width: calc(1000px / 20);
width: calc(50 * 20px);
/*+和-左右都要空格, 且都要有单位; /前和*后要有单位*/
text-transform: uppercase;
/*
大写
lowercase, 小写
capitalize, 首字母大写
*/
background-clip: border-box;
/*
裁剪到边框, 包括边框, 默认值
padding-box; 裁剪到内边距, 包括内边距
content-box; 裁剪内容区域
*/
text-shadow: 1px 2px 3px rgba(0, 0, 0, .5);
/*文本阴影: 偏移x y 模糊度 颜色*/
box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 1),
inset -1px -1px 1px rgba(0, 0, 0, 1);
/*盒阴影: inset向内模糊 默认向外, 逗号隔开不同的阴影效果*/
background: -webkit-linear-gradient(left, red 20%, blue, transparent 40%);
background: -webkit-linear-gradient(left, red, blue);
background: -webkit-radial-gradient(center, #F00, #00F);
/*
渐变: (起点位置, 起点颜色 [, 结束颜色] [段点1位置(20%)], [起始颜色] [, 结束颜色] [段点2位置(40%)]...);
-webkit-; -moz-; -ms-
*/
-webkit-box-reflect: below 0 -webkit-linear-gradient(bottom, #000, transparent 20px);
/*
倒影: 倒影方向 偏移 [倒影渐变]
Firefox和IE不支持
*/
transition: all .5s linear 100ms;
transition-property: opacity;
transition-duration: .5s;
transition-timing-function: linear;
transition-delay: 100ms;
/*
过度: 过度属性 过度时间 过度方式 延长时间, 逗号隔开不同属性的过度
过度属性(property): 如 width, top, transform;
过度时间(duration): 单位s或ms;
过度方式(timing-function)
线性过度: linear 匀速, ease 慢-快-慢, ease-in 加速, ease-out 减速, ease-in-out 慢>快>慢;
自定义线性过度: cubic-bezier(t1, s1, t3, s3);
参考链接: http://cubic-bezier.com/
断点过度: steps(number, start或end);
number 周期间隔数
start 第一帧为0%结束状态
end 第一帧为0%开始状态
-webkit-
*/
animation: a_shadow 10s linear 1s infinite alternate forwards;
/*
动画: a_shadow 10s一个周期 过度方式 延迟1s后开始 无限循环周期 轮流反向 保持结束状态
-webkit-
*/
transform: translate(1px, 1px) rotate(360deg, 0) scale(.5, 1.5) skew(1deg, 1deg);
transform-origin: x y;
/*
2d变换: 偏移 旋转 缩放 扭曲;
变换中心
-webkit-
*/
transform-style: preserve-3d;
/*声明3d视图*/
perspective: 500px;
/*透视距离, 效果为 perspective 的值减去translateZ的值*/
transform: translateZ(100px);
/*动画自身或容器相对屏幕, 向里(-效果变小)或向外(+效果变大)的距离*/
perspective-origin: 50% 50%;
/*透视中心*/
backface-visibility: hidden;
/*
只有距离效果, 没有透视效果
层叠的两个opacity, 在执行过渡或动画时, 应该在背后一层添加
*/
box-sizing: border-box;
/*
让padding和border不占空间
默认 content-box;
*/
}
@keyframes a_shadow {
30% { /*3s放大*/
transform: scale(2);
}
70%, 90% { /*4s向下, 2s停留*/
transform: translate3d(0, 10px, 0) scale(2);
}
100% { /*1s缩小*/
transform: translate3d(0, 10px, 0) scale(1);
}
}
/*自定义字体*/
@font-face {
font-family: 'myFont';
src: url('font/myFont.eot');
src: url('font/myFont.woff') format('woff'),
url('font/myFont.woff.ttf') format('truetype');
font-style: normal;
font-weight: normal;
}
/*链接或绑定点击事件的元素高亮颜色 (iOS*/
a {
-webkit-tap-highlight-color: transparent;
}
input {
-webkit-appearance: none;
border-radius: none;
/*禁用默认按钮的样式 (iOS*/
-webkit-user-modify: read-write-plaintext-only;
/*只允许输入文本内容 (-webkit-*/
}
/*改变placeholder颜色 (-webkit-*/
input::-webkit-input-placeholder {
color: gray;
}
/*让内嵌滚动条顺畅滑动, 影响性能避免整屏内嵌 (iOS*/
div {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*文字渐变 (-webkit-*/
div {
width: 100px;
background: -webkit-linear-gradient(left, red, blue);
-webkit-background-clip: text;
color: transparent;
}
/*文字镂空 (-webkit-*/
div {
font-size: 2em;
-webkit-text-stroke: 1px #000;
color: transparent;
}
p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*单行超出省略*/
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
/*多行超出省略, 设置高度避免兼容问题*/
}
/*蒙版 (-webkit-*/
div {
height: 100px;
background: url(1.jpg);
background-size: 100% auto;
-webkit-mask: -webkit-linear-gradient(left, #000, transparent 20%, transparent 80%, #000);
/*渐变做蒙版*/
-webkit-mask-image: url(1.png);
/*图片做蒙版*/
-webkit-mask-position: left top;
/*定位蒙版*/
-webkit-mask-origin: padding;
/*从包括border的位置开始定位*/
-webkit-mask-size: cover;
/*拉伸蒙版*/
-webkit-mask-repeat: no-repeat;
/*蒙版不重复*/
-webkit-mask-clip: padding;
/*蒙版延伸到包括border的区域*/
-webkit-mask-composite: xor;
/*多张蒙版的重叠顺序*/
}
/*滤镜 (-webkit-*/
div {
height: 100px;
background: url(1.jpg);
-webkit-filter: brightness(1);
/*(0, 1)变暗, (1, )高亮*/
-webkit-filter: blur(1px);
/*(0, )模糊*/
-webkit-filter: contrast(2);
/*(0, 1)对比度小于原图, (1, )对比度大于原图*/
-webkit-filter: saturate(2);
/*(0, 1)饱和度小于原图, (1, )饱和度大于原图*/
-webkit-filter: invert(1);
/*(0, 1)反色*/
-webkit-filter: sepia(1);
/*(0, 1)叠加褐色*/
-webkit-filter: hue-rotate(180deg);
/*(0deg, 360deg)叠加色环中指定颜色*/
}
css - css3
猜你喜欢
转载自blog.csdn.net/NaShiShiWo/article/details/81907884
今日推荐
周排行