css直角線 CSS實現對角邊框樣式

2021-10-13 11:28:12 字數 1178 閱讀 1915

css實現對角框,邊角加個邊框、四角框

一:線性漸變方式:

滑鼠懸停觸發顯示

:hover {

background: linear-gradient(to left, #043add, #043add) left top no-repeat,

linear-gradient(to bottom, #043add, #043add) left top no-repeat,

linear-gradient(to left, #043add, #043add) right bottom no-repeat,

linear-gradient(to left, #043add, #043add) right bottom no-repeat;

/*設定大小*/

background-size: 0.12rem 1rem, 1rem 0.12rem;

二:偽類

預設是透明opacity: 0; 滑鼠懸停觸發顯示

增加css3過渡效果,顯示更平滑

:before {

position: absolute;

bottom: 0;

left: 0;

width: 20px;

height: 20px;

content: "";

border-left: 2px solid #043add;

border-bottom: 2px solid #043add;

transition: all 0.6s ease;

opacity: 0;

:after {

position: absolute;

top: 0;

right: 0;

width: 20px;

height: 20px;

content: "";

border-right: 2px solid #043add;

border-top: 2px solid #043add;

transition: all 0.6s ease;

opacity: 0;

:hover:before,

:hover:after {

opacity: 1;

左下——右上對角邊框,也可以左上——右下對角、四個角。

自己增改**。

效果圖:

css 科技 邊框 CSS 邊框

邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值,比如 2px 或 0.1em 或者使用 3 個關鍵字之一,它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度,所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...

css 科技 邊框 CSS 邊框

邊框的寬度 為邊框指定寬度有兩種方法 可以指定長度值,比如 2px 或 0.1em 或者使用 3 個關鍵字之一,它們分別是 thin medium 預設值 和 thick。注釋 css 沒有定義 3 個關鍵字的具體寬度,所以乙個使用者 可能把 thin medium 和 thick 分別設定為等於 ...

CSS實現多重邊框

想到多重邊框,我們可能會通過多個元素來模擬實現,但是如何在乙個元素上實現多重邊框呢?如下圖 我們可以通過box shadow來實現。box shadow h shadow v shadow blur spread color inset outset 分別是 水平陰影位置 垂直陰影位置 模糊距離 擴...