フロントエンドには多くのCSSスタイルが書かれていますが、関連性が低く、フロントエンドの友達の頭皮が麻痺します。私もその一人です。面白くて忘れやすいCSSの概要を説明します。時間があるときに使うスタイル（多くは先輩のまとめです）将来見つけて使うのに便利です。もちろん、1つか2つ手伝ってもらえたら嬉しいです。名誉。
1.マスクレイヤー。以前はカスタムポップアップウィンドウを作成していました。シンプルで高速です。Ajax送信は元のWebページの更新に影響しません。方法は次のとおりです。
<div id="zhezhao">
<div id="tanchuang"></div>
</div>
<style>
#zhezhao {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
opacity: 0.95;
z-index:20;
}
#tanchuang{
position: relative;
background: gray;
width: 400px;
height: 400px;
}
</style>
2.デフォルトのスタイルを変更します。「ファイルが選択されていません」という単語をカスタマイズします。コードは次のとおりです。さまざまなスタイルを自分で追加できます。
<label for="myinput">
<span id="text1" style="border: 1px solid rgb(169, 169, 169);border-radius: 5px;cursor: pointer;background-color: white">拍照或选择文件</span>
<span id="show"></span>
<input type="file" id="myinput">
</label>
<style>
label{
position: relative;
}
#fileinp{
position: absolute;
left: 0;
top: 0;
opacity: 0;
width: 170px;
cursor: pointer;
}
#text{
color: red;
}
</style>
// js获取上传文件名字
<script>
$("#myinput").change(function () {
$("#show").html($("#myinput").val().split("\\").slice(-1) [0].slice(0,4)+'...');
})
</script>
レンダリングは次のとおりです。フルパスとファイル名が表示され、必要に応じて傍受したファイル名の部分が表示され
ます。3。ファイルのアップロード、写真のアップロード、携帯電話のカメラ
<input type="file" accept="image/*" /> //调用相机 ，图片或者相册 （两者都行）
加上了capture=camera"属性之后安卓手机就直接调用了相机，没有了图库的选项
<input type="file" accept="image/*;capture=camera"> //直接调用相机
4.divセットグラデーションカラー
<div class='mydiv'></div>
<style>
.mydiv{
color: white;
width:200px;
height:200px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#033360), to(#006495));
}
</style>
前任者からの引用：
/入力スタイルのより多くの種類については、確認してください
https://blog.csdn.net/yx_cos/article/details/82629719
のブラウザでサポートされているより多くのグラデーションボックスのスタイルについて///を、確認してください
。//blog.csdnネット：HTTPSを/ TaoYuanKuangDao / article / details / 89138551
人生は絶え間ない喪失と獲得のサイクルです。
時間は私たちに年としわをもたらすだけでなく、
貴重な知識、経験、教訓、その他の無形の富を蓄積することもできます。