CSS3笔记

摘要：隐藏表单宽高设为祖先元素隐藏或在页面外默认所有属性都将获得过渡效果。这个属性可以让你禁用系统默认菜单。背景裁剪到内容区外沿。

display:none;
表单　　type=”hidden”
宽高设为0　　height:0;width:0;
祖先元素隐藏或在页面外　　margin
Visibility:hidden;
Opacity:0;

box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
box-shadow: h-shadow v-shadow blur spread color inset/outset;
默认outset

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-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:
　　scale3d(x,y,z) /*放大*/
　　translate3d(x,y,z) /*位置*/
　　rotate3d(x,y,z,angle) /*旋转*/
　　skew(x-angle,y-angle) /*倾斜*/
　　transition-property /*规定设置过渡效果的 CSS 属性的名称*/
}    

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

background-image:linear-gradient
https://developer.mozilla.org...

background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet); 

background: linear-gradient(top,#ccc, #000);

 

background: radial-gradient(red, yellow, rgb(30, 144, 255));
　　　　　　radial-gradient(center, ellipse cover, #5170ad 0%, #355493 100%)
　　　　　　

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

background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);

-webkit-touch-callout: none; #在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

-webkit-tap-highlight-color: rgba(0,0,0,0); #点击一个链接 背景颜色

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;  #禁止用户选择文字或图片，内容

https://www.w3cplus.com/css3/...
https://developer.mozilla.org...

background-clip: border-box; // 背景延伸到边框外沿（但是在边框之下）
background-clip: padding-box; // 边框下面没有背景，即背景延伸到内边距外沿。
background-clip: content-box; // 背景裁剪到内容区 (content-box) 外沿。
默认值（initial），继承（inherit）