CSS3笔记

2022-10-10 16:23:31

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;
默认outset

transition

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）