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;
默認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）