css框體樣式

標籤：web   ace   使用   ...   針對   clip   一個   垂直   png   

//向右傾斜60度

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

 

//圓角化對象，當值到大對象一半時為正圓

border-radius:25px;

四個值: 第一個值為左上方，第二個值為右上方，第三個值為右下角，第四個值為左下角。

三個值: 第一個值為左上方, 第二個值為右上方和左下角，第三個值為右下角

兩個值: 第一個值為左上方與右下角，第二個值為右上方與左下角

一個值： 四個圓角值相同

 

//對象陰影;預設情況下外陰影；(投影方式)(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;
}

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

 

//報紙類型分文字格式設定,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;
}

<div class="newspaper">****</div>

 

//直接簡單設定

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

<div><h2></h2></div>

 

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

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

css框體樣式