一、實現乙個對話方塊
步驟:(1)三角形的實現
初始效果顯示:
初始效果的源**:
"en">class="
tr">
"x-ua-compatible是針對ie8新加的乙個設定,對於ie8之外的瀏覽器是不識別的,這個區別與content="ie=7"在無論頁面是否包含指令,都像是使用了 windows internet explorer 7的標準模式。而content="ie=emulateie7"模式遵循指令。對於多數**來說,它是首選的相容性模式。x-ua-compatible
" content="
edge
" />
border-color:設定或檢索物件的邊框顏色。參閱border-colors屬性。預設值:看每個獨立屬性
相關屬性:[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]
最終實現的效果:
將上述源**中的border-color改為:
border-color: transparent transparent #ccc transparent;//上、右、下、左transparent為預設值,邊框顏色為透明的
現在使用三角形進行來進行製作對話方塊:
對話方塊最終效果:
對話方塊最終的**:
"en:before 選擇器在被選元素的內容前面插入內容。">class="
ts">這是乙個對話方塊!!
二、畫乙個平行四邊形
其最終的效果:
利用skew特性,第乙個引數為x軸傾斜的角度,第二個引數為y軸傾斜的角度。
class="三、用乙個div畫乙個五角星par">
最終實現的效果:
實現該效果的源**:
"str四、用乙個div實現">
CSS實現各種有趣形狀
1 梯形原理是設定乙個較粗的邊框,將上 右 左 設定為透明,將下邊顏色填充即可實現 2 這個簡單 border radius 寬高的一半即可實現 3 橢圓原理是寬是高的一半,或反之也行,形狀一樣,就是會調乙個身位,感興趣可以試試 4 半圓原理是半徑的 一半數值 5 根據半圓玩出來的,樹葉飛舞之處,火...
CSS實現的陰影效果
一點陰影可以給平板的設計增加縱深的感覺,很多時候我們可以直接用photoshop直接製作帶陰影的以供使用 但是對於一些和使用者互動的,特別是對於一些簡單的文字層,如果用就不太好處理。這裡介紹的是一種不需要使用背景,而只需要用css完成的。效果圖 實現的方法主要是2個層。乙個層用做背景,然後把這個層做...
實現乙個有趣的小效果
一 新建乙個project。二 新增兩個textview,並設定它的屬性。android id id tv one android layout width wrap content android layout height wrap content android text 瘋狂源自夢想,技術成...