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 分別是 水平陰影位置 垂直陰影位置 模糊距離 擴...