製作表單(第一期筆記) 美化表單常用的css樣式

2022-03-13 05:44:00 字數 1317 閱讀 3849

不管三七二十一,想要自己設計輸入框樣式,我們第一步需要清除input自帶樣式

input
最好給輸入框設定一下左右邊距,不會顯得輸入文字過於擁擠

新增padding:0 8px;之後的樣式,顯得大氣很多

利用border-radius設計輸入框會讓表單頓時高大上起來,圓潤的東西總是給人柔和的印象

陰影在在聚焦狀態和反饋狀態經常用到,新增陰影過後質感也會變得不一樣

栗子中聚焦用到的陰影樣式:

input:focus

語法:

box-shadow: h-shadow

v-shadow

blur

spread

color inset;

h-shadow:必需,水平陰影位置,允許負值

v-shadow:必需,垂直陰影位置,允許負值

blur:可選,模糊距離

spread:可選,陰影尺寸

color:可選,陰影顏色

inset:可選,將外部陰影(outset)改為內部陰影

雖然說利用background-color: transparent;可以製作透明背景色,但是在輸入框中一般不使用,全透明了有點沒意思,所以一般會利用background: rgba();來設計一些半透明的輸入框,這種時候通常會搭配一些稍微豐富一點的背景色

規劃小結(第一期)

一月一小結,這是規劃裡既定的方案,而從正式開學大現在也剛有31天了,所以寫下第一期的規劃小結,和有關於下一期的規劃安排。在第一期的學習中,其實是在原本的規劃上有一定小的調整的,總結的概括如下 第一 調整了對於bootloader的學習,在這一期主要將bootloader進行了乙個系統的了解,而並未著...

Unity學習筆記 Shader第一期

fallback 總結參考文獻 用unity做遊戲開發的小夥伴對此一定不陌生,shader也稱之為 著色器 實際上就是一小段程式,它負責將輸入的mesh 網格 以指定的方式和輸入的貼圖或者顏色等進行組合處理,然後輸出,同時繪圖單元可以依據輸出的內容來將影象繪製到螢幕上。我們在unity中輸入的貼圖或...

總結做完第一期專案

首先,對於這個專案,需求不是很明確,然後要到交貨的時候,都還在趕,還在添需求,給研發來說,心驚膽顫,因為怕新增的會有影響。所以,一定在前期,先把需求整理好。如果對需求沒有理解充分,就及時的與客戶交流。當然,也會遇到傳說中的不好交流的客戶,給研發人員來說,那就是一種壓力,所以不想去理睬客戶。但是最後傷...