1. css畫長方形顏色各一半怎麼畫
緩過來了，開講放射性漸變吧。
一、放射性漸變原理
別人都用ps解釋，我卻在漸變上獨喜歡flash的漸變變形工具。
別人都說徑向漸變，flash裡面顯示的是放射性漸變，我就沿用了放射性漸變的說法。你看出來啦，我曾經是flash的迷妹！
.gif
放射性漸變的核心就是：從中心點出發，輻射到邊界處。
設置了四個色塊，如圖：
.png
用漸變變形工具可以查看
.png
默認第一個色塊從中心點出發，沿著半徑分布色塊，直到邊界處。
所以，我們可以理解這里的漸變線是半徑。
可以通過改變中心點的位置，邊界的大小，半徑的長短，三角形的移動實現非對稱的漸變等效果。
.png
原諒我沒有來動畫版本的，自己用flash試試唄！
其實來個橢圓一樣妥妥的。
.png
明白了這個基本的原理後，再看MDN上的這篇文章，是不是感覺很好懂了。
至少這幅圖好懂了↓
.png
半徑就是虛擬漸變射線(virtual gradient ray)，中心點就是色塊的起點(0%)，ending shape就是漸變的邊界形狀。ending shape只能是正圓(circle)或者橢圓(ellipse)。
二、放射性漸變的語法結構// Definition of the ending shape
radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, … ) */
radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, … ) */
radial-gradient( , … ) /* It draws a circle */
radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */
radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axes are given, horizontal, then vertical */
// Definition of the position of the shape
radial-gradient ( … at , … )
// Definition of the color stops
radial-gradient ( …, , … )
radial-gradient ( …, , )
官方的標准語法HTMD復雜呀。
我們只能一點點攻克了。
先了解幾個基本概念：
：指的是中心點的位置，這個定位和background-position的定位是一樣的，比如「50px 40px」，「30% 44px」，「left center」等值，一個代表x坐標，一個代表y坐標。如果預設，代表的是正中間(center)。它的取值也是這幾種：
：用長度值指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
：用百分比指定徑向漸變圓心的橫坐標或縱坐標。可以為負值。
left：設置左邊為徑向漸變圓心的橫坐標值。
center：設置中間為徑向漸變圓心的橫坐標值或縱坐標。
right：設置右邊為徑向漸變圓心的橫坐標值。
top：設置頂部為徑向漸變圓心的縱標值。
bottom：設置底部為徑向漸變圓心的縱標值。
：只能為正圓或者橢圓，正圓表示半徑是一樣的，橢圓則有x軸、y軸兩個半徑。默認的值是橢圓(ellipse)。
：沿著漸變線的色彩的值和位置的值。位置的值可以是百分比或者具體的像素，和線性漸變的寫法是一樣的。比如「#f00 0%」，「red 25%」，「rgba(255,255,255,0.5) 200px」等。
：表示ending shape放射性漸變結束的形狀的大小。
常用的有如下幾個值：
closest-side：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊；
closest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最近的角；
farthest-side：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊；
farthest-corner：指定徑向漸變的半徑長度為從圓心到離圓心最遠的角，這個是默認值；
2. css做的一個立方體，旋轉的時候怎麼讓每個面跟著旋轉，可以讓上面的數據顯示始終為正向顯示
把要旋轉的部分單獨提取出來，這樣才不會影響到其他，性能也好很多。
3. 旋轉正方體
想來大家在初學前端之處，也很好奇，那些炫酷的特效真的可以由自己編寫出來嘛，其實是的，現在我來分享一個旋轉的正方體。還請大家多多支持。
做一個正方體首先要做出六個面，這就可以定下來基本的形狀。讓這個正方體旋轉起橋昌來，其實就是讓各個面保持一個相同的運動軌跡，讓他們在x/y/z軸進行一定程度的旋轉起來。物體的運動就是一個動畫的定義，可以自己定運動周期的時間。
1.首先，定義六個面，需要注意的，保持box1-6關於y及z旋轉的角度要相等，槐消消否則會出現旋轉後離體的現象。顏色最好使用半透明，這樣旋轉起來效果更好。
2.現在需要寫出一個div，給旋轉的立方體一個布局空間。
現在裡面已經定義了3d旋轉，以及設置了從何處查看一個元素的角度，還規定了旋轉的周期。當在 @keyframes 創建動畫，把它綁定到一個選擇器，否則動畫不會有任何效鉛知果。
把 "mydhua" 動畫捆綁到 div 元素，時長：5 秒：
3.div布局設置完成，六個面也已經寫好，下一步就是利用css動畫，製作一個動態
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。
0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的瀏覽器支持，可以定義 0% 和 100% 選擇器。
這個時候，在body裡面就可以直接使用了
此時，你就可以看到一個旋轉的立方體了。感興趣的話，可以試一試呀！
4. css3怎麼讓立方體隨著滑動進行3d旋轉
我有自己做好的弊遲 能3d 旋虧老轉 的立方體例子，但是如果你需要支持用銷卜升滑鼠拖動。那麼 css3 辦不到，要用javascript 滑鼠交互事件
5. 使用HTML+CSS做一個正方體
我們創建一個父容器，裡面保存正方體六個面
6. html5 css3怎麼用無序列表寫一個3d立體正方體，目前還沒學js，所以求怎麼寫，來個事例，參
加入正方形寬高為100px，
ulli:nth-child(1){
background-color:red;
transform:translate(-100px)rotateY(90deg);
}
ulli:nth-child(2){
background-color:blue;
transform:translate(100px)rotateY(90deg);
}
ulli:nth-child(3){
background-color:orange;
transform:translateZ(100px);
}
ulli:nth-child(4){
background-color:green;
transform:translateZ(-100px);
}
ulli:nth-child(5){
background-color:black;
transform:translateY(100px)rotateX(90deg);
}
ulli:nth-child(6){
background-color:chocolate;
transform:translateY(-100px)rotateX(90deg);
}空頃蠢間想像力要臘擾好，最開始所有面都重合在一起輪乎旦，要一個個移到指定位置形成個立方體
7. CSS畫三角形、圓形、橢圓形總結
CSS畫正方形長方形很簡單，本文就不說了。
一、三角形
1、CSS畫等腰三角形
2、畫直角三角形：
二、畫圓形
注意：border-radius是width/height的一半（50%）。
畫半圓：
半圓的畫法是把高度設為寬度的一半，並且也只設置左上角和右上殲指角的半徑，且半徑為寬度的一半。
畫四分之一圓：是把高度和寬度設置為相等，只設置一個圓角，其半徑等於高度或寬度。
三、畫橢圓
斜杠前面的一組四個值分別表示四個角的水平半徑；斜杠後面的一組四個值分別表示四個角的垂直半徑。
四、平行氏大配四邊形
margin-left是為了使得平行四邊形可以全部在瀏覽器中顯示出來
五、梯形
高度為0。有寬度沒高度。
六、五邊仿局形、六邊形
8. css多個立方體並排後能看到背面露出來了
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>_</title></head><body><div class="contain">凳清禪 <div class="box"> <div class="face one">正褲 </div> <div class="face two"> </div> <div class="face three"> </div> <div class="face four"> </div> <div class="face five"> </div> <div class="棗塵face six"> </div>
9. 如何使用CSS畫一個空心長方形 要代碼哦，是使用DIV+CSS
如果你只要一條垂直線就設置這個DIV的邊框線樣式就可以了，樣式代碼：border-left:1px #000000 solid 這里的border-left是指這個DIV的左邊邊框，1px就是線的寬度，#000000是線的鍵段顏色（這里是黑色），solid是線的樣鬧亮陸液頃式（這里是實線），整個DIV的代碼可以這樣寫：<div style="width:200px; height:500px; border-left:1px #000000 solid;"></div>
10. css3寫魔方里的小方塊怎麼弄
魔方是由26個小方塊組成的。最初的魔方是三階立方體，26個小方塊和一個三維十字連接軸組成。其中包含6個處於滲賣兆面最中心無法移動的塊，12個位於棱上的塊和8個角塊。六個面每個配基有一種顏色，一般來說，標準的魔方的顏色應該是藍、白、紅、綠、黃和橙色，其中藍白相對、綠黃相對、紅橙相對。
在中國，魔方是80年代最搶手的玩具，如同今天孩子們手中的掌上游戲機一樣，成為青少年最喜歡的玩具。但是隨著改革開放，越來越多的新奇玩具進入了中國，中國的魔方熱潮也在漸漸消退。
不過最近幾年，中國的非正式魔方社群魔方吧正在努力改變公眾對於魔方的看法。魔方不僅僅是小孩子的玩具，更是一種休叢租閑放鬆的方式，再加上更有刺激和挑戰性的競速、單手擰魔方的玩法，越來越多的人正在重新關注魔方。