CSS3笔记
HTML隐藏
display:none;
表单 type=”hidden”
宽高设为0 height:0;width:0;
祖先元素隐藏或在页面外 margin
Visibility:hidden;
Opacity:0;box-shadow
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: h-shadow v-shadow blur spread color inset/outset;
默认outsettransition
transition:
all #所有属性都将获得过渡效果。
property #定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔
transition-duration #规定完成过渡效果需要多少秒或毫秒
transition-timing-function #规定速度效果的速度曲线
inear #规定以相同速度开始至结束的过渡效果
ease #规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in #规定以慢速开始的过渡效果
ease-out #规定以慢速结束的过渡效果
ease-in-out #规定以慢速开始和结束的过渡效果
transition-delay #定义过渡效果何时开始。
transform-origin: x-axis y-axis z-axis; #设置旋转中心
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
transition-delay: 0.2s;
transition: property duration timing-function delay; animation
animation-name
animation-duration/*持续时间*/
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out
animation-delay /*延迟时间*/
animation-iteration-count
animation-direction :normal | altenate
animation-fill-mode: none | forwards /*当动画完成后，保持最后一个属性值*/| backwards | both
animation-play-state: paused|running
.in {
z-index:999;
display: block;
-webkit-animation: in-charlie .75s ease-out forwards .25s;
-moz-animation: in-charlie .75s ease-out forwards .25s;
-o-animation: in-charlie .75s ease-out forwards .25s;
animation: in-charlie .75s ease-out forwards .25s;
opacity: 0;
}
@-webkit-keyframes in-charlie {
0% {
-webkit-transform: translate3d(0, 150px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-moz-keyframes in-charlie {
0% {
-moz-transform: translate3d(0, 150px, 0);
opacity: 0;
}
100% {
-moz-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@-o-keyframes in-charlie {
0% {
-o-transform: translate3d(0, 150px, 0);
opacity: 0;
}
100% {
-o-transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes in-charlie {
0% {
-webkit-transform: translate3d(0, 150px, 0);
-moz-transform: translate3d(0, 150px, 0);
-o-transform: translate3d(0, 150px, 0);
transform: translate3d(0, 150px, 0);
opacity: 0;
}
100% {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
}transform
{
transform:
scale3d(x,y,z) /*放大*/
translate3d(x,y,z) /*位置*/
rotate3d(x,y,z,angle) /*旋转*/
skew(x-angle,y-angle) /*倾斜*/
transition-property /*规定设置过渡效果的 CSS 属性的名称*/
} input-placeholder
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f00;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f00;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #f00;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #f00;
}gradient
background-image:linear-gradient
https://developer.mozilla.org...
<code class=" language-css"><span class="token property">background<span class="token punctuation">: <span class="token function">linear-gradient<span class="token punctuation">(to right,red,orange,yellow, green, blue,indigo,violet<span class="token punctuation">)<span class="token punctuation">; <br></span></span></span></span></span></span></code>
background: linear-gradient(top,#ccc, #000);
<code class=" language-css"><span class="token property"><span class="token punctuation"><span class="token function"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"> </span></span></span></span></span></span></code>
<code class=" language-css"><span class="token property">background<span class="token punctuation">: <span class="token function">radial-gradient<span class="token punctuation">(red, yellow, <span class="token function">rgb<span class="token punctuation">(<span class="token number">30, <span class="token number">144, <span class="token number">255<span class="token punctuation">)<span class="token punctuation">)<span class="token punctuation">;<br> radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%)<br> </span></span></span></span></span></span></span></span></span></span></span></span></code>
background-image: radial-gradient(ellipse farthest-corner at 45px 45px , #00FFFF 0%, rgba(0, 0, 255, 0) 50%, #0000FF 95%);
background-image: radial-gradient(16px at 60px 50% , #000000 0%, #000000 14px, rgba(0, 0, 0, 0.3) 18px, rgba(0, 0, 0, 0) 19px);
<code class=" language-css"><span class="token property"><span class="token punctuation"><span class="token function"><span class="token punctuation"><span class="token function"><span class="token punctuation"><span class="token number"><span class="token number"><span class="token number"><span class="token punctuation"><span class="token punctuation"><span class="token punctuation"> </span></span></span></span></span></span></span></span></span></span></span></span></code>
<code class=" language-css"><span class="token property">background<span class="token punctuation">: <span class="token function">repeating-linear-gradient<span class="token punctuation">(to top left, red, red <span class="token number">5px, white <span class="token number">5px, white <span class="token number">10px<span class="token punctuation">)<span class="token punctuation">;</span></span></span></span></span></span></span></span></span></code>-webkit-touch-callout
-webkit-touch-callout: none; #在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。-webkit-tap-highlight-color
-webkit-tap-highlight-color: rgba(0,0,0,0); #点击一个链接 背景颜色user-select
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; #禁止用户选择文字或图片，内容filter
https://www.w3cplus.com/css3/...
https://developer.mozilla.org...
-webkit-box-reflect below | above | left | right
::-webkit-scrollbar
background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
默认值（initial），继承（inherit）
