css框體樣式

時間 2019-11-13

標籤 css 樣式欄目 CSS 简体版

原文原文鏈接

//向右傾斜60度web

transform:rotate(60deg);
-ms-transform:rotate(60deg); /* IE 9 */
-webkit-transform:rotate(60deg); /* Safari and Chrome */瀏覽器

//圓角化對象，當值到大對象一半時爲正圓字體

border-radius:25px;動畫

四個值: 第一個值爲左上角，第二個值爲右上角，第三個值爲右下角，第四個值爲左下角。url

三個值: 第一個值爲左上角, 第二個值爲右上角和左下角，第三個值爲右下角spa

兩個值: 第一個值爲左上角與右下角，第二個值爲右上角與左下角code

一個值：四個圓角值相同orm

//對象陰影;默認狀況下外陰影；(投影方式)(X軸偏移量)(Y軸偏移量)(陰影模糊半徑)(陰影擴展半徑)(陰影顏色)對象

box-shadow: 10px 10px 5px #888888;圖片

//圖片邊框;round:複製部份內容填充; stretch:拉伸部位填充針對div

border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */

//背景圖片直接設置屬性；100%：拉伸到整個區域

background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;

background-size:100% 100%

//由內到外三層放置背景圖片

content-box, padding-box,和 border-box區域內能夠放置背景圖像

//位置背景的裁剪

background-clip: padding-box;

background-clip: content-box;

//顏色漸變（紅和藍）方向；顏色1；顏色2；顏色3...；方向能夠是角度：90deg

//background: linear-gradient(direction, color-stop1, color-stop2, ...);

//(red 10%, green 85%, blue 90%);指定顏色百分比後漸變顏色節點會消失

//(left, rgba(255,0,0,0), rgba(255,0,0,1));漸變的透明屬性只能用rgba設置

background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 標準的語法（必須放在最後） */

//repeating使漸變重複

background: repeating-linear-gradient (red, green, blue);

//徑向漸變 - 顏色結點均勻分佈（默認狀況下）；圈狀

background: radial-gradient(red, green, blue);

//徑向漸變爲圓形//摺合前面屬性加上對應前綴便可

background: radial-gradient(circle, red, yellow, green);

//指定的文字水平陰影，垂直陰影，模糊的距離，以及陰影的顏色

text-shadow: 5px 5px 5px #FF0000;

//box-shadow 屬性適用於盒子陰影，水平陰影，垂直陰影，模糊的距離，以及陰影的顏色

width:300px;
height:100px;

box-shadow: 10px 10px 5px #888888;

//陰影的卡片模式

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

//超出部分隱藏

white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;

//文本超出換行

word-wrap:break-word;

//單詞拆分換行

word-break:keep-all;

//使用本身下載的字體注意兼容性

@font-face
{
　　font-family: myFirstFont;
　　src: url('Sansation_Light.ttf')
　　,url('Sansation_Light.eot'); /* IE9 */
}

div{font-family:myFirstFont;}

//旋轉30度角 3條語句效果同樣

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */

//translate()方法，根據左(X軸)和頂部(Y軸)位置給定的參數，從當前元素位置移動。

transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */

//rotate()方法，在一個給定度數順時針旋轉的元素。負值是容許的，這樣是元素逆時針旋轉。

transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */

//scale()方法，該元素增長或減小的大小，取決於寬度（X軸）和高度（Y軸）的參數：

-ms-transform:scale(2,3); /* IE 9 */

-webkit-transform: scale(2,3); /* Safari */

transform: scale(2,3); /* 標準語法 */

//包含兩個參數值，分別表示X軸和Y軸傾斜的角度，若是第二個參數爲空，則默認爲0，參數爲負表示向相反方向傾斜

transform:skew(30deg,20deg);
-ms-transform:skew(30deg,20deg); /* IE 9 */
-webkit-transform:skew(30deg,20deg); /* Safari and Chrome */

//matrix 方法有六個參數，包含旋轉，縮放，移動（平移）和傾斜功能。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */

//rotateX()方法，圍繞其在一個給定度數X軸旋轉的元素。

transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */

//rotateY()方法，圍繞其在一個給定度數Y軸旋轉的元素。

transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */

//鼠標通過的多樣式過分，帥氣

div {
　　width: 100px;
　　height: 100px;
　　background: red;
　　-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
　　transition: width 2s, height 2s, transform 2s;
}

div:hover {
　　width: 200px;
　　height: 200px;
　　-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
　　transform: rotate(180deg);
}

//過分等待反應時間設置

transition:width 1s linear 2s;

//紅到黃5秒時間漸變

div
{　 width:100px;
　　height:100px;
　　background:red;
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari 與 Chrome */
}

@keyframes myfirst

{

from {background:red;}
to {background:yellow;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

from {background:red;}
to {background:yellow;}

}

//百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。注意對應瀏覽器

div

{

　　width:100px;

　　height:100px;

　　background:red;

　　animation:myfirst 5s;

　　-moz-animation:myfirst 5s; /* Firefox */

　　-webkit-animation:myfirst 5s; /* Safari and Chrome */

　　-o-animation:myfirst 5s; /* Opera */

}

@keyframes myfirst

{

　　0% {background:red;}

　　25% {background:yellow;}

　　50% {background:blue;}

　　100% {background:green;}

}

@-moz-keyframes myfirst /* Firefox */

{

　　0% {background:red;}

　　25% {background:yellow;}

　　50% {background:blue;}

　　100% {background:green;}

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

　　0% {background:red;}

　　25% {background:yellow;}

　　50% {background:blue;}

　　100% {background:green;}

}

@-o-keyframes myfirst /* Opera */

{

　　0% {background:red;}

　　25% {background:yellow;}

　　50% {background:blue;}

　　100% {background:green;}

}

//改變了背景色和位置，實現方框式移動

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25% {background: yellow; left:200px; top:0px;}
    50% {background: blue; left:200px; top:200px;}
    75% {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    0%   {background: red; left:0px; top:0px;}
    25% {background: yellow; left:200px; top:0px;}
    50% {background: blue; left:200px; top:200px;}
    75% {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

//移動加漸變總體效果，運行myfirst動畫，設置全部的屬性：

div
{

　　width:100px;
　　height:100px;
　　 background:red;
　　 position:relative;
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 與 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

//報紙類型分文本格式,count對應的是分幾個，gap對應的之間間隔，rule-style對應兩列之間的邊框，rule-width對應邊框厚度

　　rule-color對應邊框顏色

.newspaper
{
　　-moz-column-count:3; /* Firefox */
　　-webkit-column-count:3; /* Safari and Chrome */
　　 column-count:3;

　　-moz-column-gap:40px; /* Firefox */
　　-webkit-column-gap:40px; /* Safari and Chrome */
　　 column-gap:40px;

　　 -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
-moz-column-rule-style: solid; /* Firefox */
column-rule-style: solid;

      -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */
     -moz-column-rule-width: 1px; /* Firefox */
      column-rule-width: 1px;

      -webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */
     -moz-column-rule-color: lightblue; /* Firefox */
     column-rule-color: lightblue;
}

//直接簡單設置

    -webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;

//指定跨越幾個邊框

h2 {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
}

//column-width 屬性指定了列的寬度。

div { -webkit-column-width: 100px; /* Chrome, Safari, Opera */ column-width: 100px;}