css框體樣式
//向右傾斜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框體樣式