矩形的四角發光

2021-08-10 00:03:07 字數 2238 閱讀 1380

最近在做乙個運維的專案,設計的乙個介面,為了體現科技感,四周加了個發光的直角。

設計稿demo:

用**如何實現呢?我是這樣寫的,各位看官有更好的建議非常歡迎提出,瘋姑娘也是在摸索著前進中~~

<

divstyle="width:820

px;height: 250

px;margin-right: 10

px;float:left;position:relative;">

<

imgsrc="../直角-左上.png"style="margin-left: -6

px;margin-top: -7

px;">

<

imgsrc="../直角-右上.png"style="padding-left: 93%;margin-top: -7

px;position:absolute;">

<

imgsrc="../直角-左下.png"style="margin-left:-4.4%;padding-top: 28%;position:absolute;">

<

imgsrc="../直角-右下.png"style="padding-left: 93%;padding-top: 28%;position:absolute;">

div>

大概思路:
1.布局好div
2.4個直角的利用定位的方式固定到每個角落
缺點:
不能自適應各個螢幕大小,直角會移動位置,只能用按開始矩形的比例變化時位置才不會便移
get **實現新方式~~~
在css裡有個border-image的屬性,可以完全實現此效果。

.box
重點:
1.背景圖是4個發光直角組成乙個正方形
2.border-image-slice 不能寫單位px,是單個直角的寬度,34px;

postgresql學習筆記(四)角色

1 在postgresql安裝過程中的資料初始化階段,系統會預設建立乙個名為postgres的角色 同時會建立乙個名為postgres的同名database 2 可以通過ident身份驗證機制來將作業系統的的root使用者對映到資料的postgresql角色,這樣可以實現root使用者無密碼直接登入...

oracle學習筆記四 角色管理

本來今天還不打算講oracle角色管理的,但是因為上篇筆記中提到了oracle的角色許可權,也不想讓朋友繞太多的彎子,所以這個筆記決定記下關於oracle的角色管理。首先,什麼是oracle的角色呢?解釋起來可能有點抽象,我舉個例子吧,相信朋友們一看就能了解的了,在我們現實中,有市長,局長,省長等等...

水泥管塔 or 四角鐵塔?

e公司的水泥管塔 造型很未來 環保牌鋼材 水泥塔用鋼材只有鐵塔的1 10,但是鐵塔可以搬遷,從乙個地方拆了可以換個地方重建,水泥塔中的鋼材不能直接重複利用 占地面積 從實物圖看,水泥塔占地面積還是不小的 外形 鐵塔很土,水泥塔很詭異 抗震 肯定鐵塔好,而且區域性的損壞也比較容易修復 抗風雪 肯定水泥...