怎麼讓div邊框立體 9個很棒的CSS邊框技巧

2021-10-11 13:41:25 字數 2308 閱讀 9592

如果您是前端開發人員,那麼幾乎每天都會使用css邊框。我發現了一些可以在您的專案中使用的有用的技巧。

開始吧!

當我們想使我們的專案更可見時,該怎麼辦?

來給它做個動畫!

我們可以對我們的邊框進行動畫化處理,甚至在不改變元素大小的情況下也可以進行動畫化處理,非常簡單。

要做到這一點,我們只需要為動畫建立乙個自定義的關鍵幀(keyframe),並在元素的css**中的動畫(animation)引數中使用它。

讓我們看乙個例子,html如下

程式設計適合那些有不同想法的人... 

對於那些想要創造大事物並願意改變世界的人們。

編寫css和動畫

@keyframes animated-border 

100%

}#box

效果如下

你是否曾經想象過你的元素周圍有甜甜圈?

現在,你無需過多的編碼即可通過純css新增它們。

為此,你需要在元素的css**中使用border-image屬性。

讓我們看乙個例子,還是之前的html

程式設計適合那些有不同想法的人... 

對於那些想要創造大事物並願意改變世界的人們。

編寫css

#box
效果如下

如果我們需要雙色超可視邊框怎麼辦?

我們可以穿上蛇的衣服,想怎麼著色就怎麼著色。

#box
效果如下

你是否曾經嘗試在div周圍新增3d樣式邊框?

在我們的元素中新增一些多色深度是非常容易的,我們只需要在css中新增一些方塊陰影就可以了。

讓我們測試一下我們的例子!

#box
效果

有時我們需要在現成的設計中新增邊框,但新增更多畫素會有些問題,它可能改變元素的位置。

現在,我們可以使用圍繞元素的框陰影作為邊框,看一下**。

#box
效果

我們可以通過幾種方式達到與蛇式類似的效果。接下來,其中之一是在元素css中混合box-shadowoutline屬性。

讓我們來看看。

#box
效果

我們甚至可以在邊框中建立一些顏色和元素。

為此,我們需要混合陰影和輪廓,如下面的示例所示。

讓我們嘗試一下。

#box
效果

我們也可以混合一些box-shadowoutline的邊框。

這將建立乙個漂亮的帶尖刺的線條效果,如下例所示。

讓我們檢查一下**!

#box
效果

如果我們想給邊框加上比前面的示例更多的顏色怎麼辦?

我們甚至可以將元素的每一面都設定為不同的顏色。

為此,我們將需要一些帶有漸變的自定義背景。

看下面的例子。

#box
效果

好了,這是最後乙個點子,暫時先說到這裡。

希望你喜歡,希望這幾個想法對你有用。

怎麼讓邊框從父容器的底邊的中部出現,讓後變長。

運用的主要的原理 position定位 包括水平居中 用定位實質上想讓子元素的中心點和父元素的中心點重合,還要控制住子元素的width的變化,還有就是 hover效果。html部分 css部分 container container li span container li hover span我又...

讓兩個Div併排顯示的方法

讓兩個div併排顯示 示例 style width 300px height auto float left display inline aaaadiv style width 300px height auto float left display inline bbbbdiv 示例 left,...

讓兩個Div併排顯示的多種方法

讓兩個div併排顯示 一 使用display的inline屬性 複製 如下 aaaa bbbb 二 通過設定float來讓div併排顯示 複製 如下 1111 2222 2222 2222 三 對程式設計客棧於兩個div併排,左邊為絕對寬度,右邊為相對寬度的,需要用到這種布局的情況比較多見,如左邊為...