css實現有趣的效果

2022-05-07 13:42:10 字數 2985 閱讀 2662

一、實現乙個對話方塊

步驟:(1)三角形的實現

初始效果顯示:

初始效果的源**:

"en

">class="

tr">

"

x-ua-compatible

" content="

edge

" />

x-ua-compatible是針對ie8新加的乙個設定,對於ie8之外的瀏覽器是不識別的,這個區別與content="ie=7"在無論頁面是否包含指令,都像是使用了 windows internet explorer 7的標準模式。而content="ie=emulateie7"模式遵循指令。對於多數**來說,它是首選的相容性模式。

border-color:

預設值:看每個獨立屬性

相關屬性:[ border-top-color ] || [ border-right-color ] || [ border-bottom-color ] || [ border-left-color ]

設定或檢索物件的邊框顏色。參閱border-colors屬性。

最終實現的效果:

將上述源**中的border-color改為:

border-color: transparent transparent #ccc transparent;//上、右、下、左
transparent為預設值,邊框顏色為透明的

現在使用三角形進行來進行製作對話方塊:

對話方塊最終效果:

對話方塊最終的**:

"en

">class="

ts">這是乙個對話方塊!!

:before 選擇器在被選元素的內容前面插入內容。

二、畫乙個平行四邊形

其最終的效果:

利用skew特性,第乙個引數為x軸傾斜的角度,第二個引數為y軸傾斜的角度。

class="

par">

三、用乙個div畫乙個五角星

最終實現的效果:

實現該效果的源**:

"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 瘋狂源自夢想,技術成...