CSS實現輸入框的周圍高亮效果讓邊框發亮

2022-09-24 22:45:14 字數 846 閱讀 8418

又到週末了,這一天天過的真快,明天應該回老家了,不知道會不會有機會進行編寫,盡量爭取吧,實在不想就這樣間斷。如果說從前會一天天無聊到爆,那現在自己應該是一天天忙的要死,欠缺了太多東西,那些浪費的時間可不是懊惱就能解決的,出來混,終歸是要還的啊。

先來幅圖畫,顯示下什麼是所謂的高亮效果

在輸入框周圍出現了亮光,或者說陰影造成邊框發亮的假象,這就是我所說的高亮效果,那究竟該如何是實現呢?

這樣我們先來上一下**,我是用的楓樹瀏覽器,是webkit核心,所以這裡只寫了webkit

複製**

**如下:

.aa:hover

.aa

就這麼了了幾句話就實現了功能,圖我就不上了,大致跟上面乙個效果,則來分析一下成功的幾個關鍵點:

1、transition的過渡,border linear .2s這是說border屬性的逐步過渡,而後面則是對陰影部分的逐步過渡;

2、rgba(a,b,c,d),這個前面我們曾經用到過很多次,前三位湊成顏色,而第四位則是透明度,還需牢記才是;

3、box-shadow:x y 10px rg程式設計客棧ba(a,b,c,d),同樣在前面用到過很多次,x y分別是陰影的方向, 然後是陰影蔓延距離,最後則是陰影部分的顏色;

4、最後則是:hover,偽元素和偽類可以單獨寫一篇了吧,但是這個:hover起碼我們都是相當熟悉的了吧

當然,不要忘記html部分的編寫哦

複製**

**如下:

這個可以直接複製去程式設計客棧試試效果哦,不過我敲出來的只是webkit瀏覽器的額

本文標題: css實現輸入框的周圍高亮效果讓邊框發亮

本文位址: /web/css/82859.html

CSS實現輸入框的高亮效果 Day50

又到週末了,這一天天過的真快,明天應該回老家了,不知道會不會有機會進行編寫,盡量爭取吧,實在不想就這樣間斷。如果說從前會一天天無聊到爆,那現在自己應該是一天天忙的要死,欠缺了太多東西,那些浪費的時間可不是懊惱就能解決的,出來混,終歸是要還的啊。先來幅圖畫,顯示下什麼是所謂的高亮效果 在輸入框周圍出現...

CSS實現輸入框的高亮效果 Day50

又到週末了,這一天天過的真快,明天應該回老家了。不知道會不會有機會進行編寫。盡量爭取吧,實在不想就這樣間斷。假設說從前會一天天無聊到爆,那如今自己應該是一天天忙的要死,欠缺了太多東西,那些浪費的時間可不是懊惱就能解決的。出來混。終歸是要還的啊。先來幅圖畫,顯示下什麼是所謂的高亮效果 在輸入框周圍出現...

QT IP輸入框的實現

流程圖 我首先在xx.ui介面中畫了四個lineedit 分別取名為 le ip 1,le ip 2,le ip 3,le ip 4 做輸入ip位址用,限定了最大輸入長度為3 三個label 輸入點 最外面的框是乙個容器frame 遇到的問題 解決方法 只能採取笨辦法判斷是哪個lineedit發出訊...