カメラを開くと通常はスキャンボックスが表示されますが、静的なQRコードではフォーカスを合わせたりスキャンしやすくするためのフレームが追加されることもあります。CSSでフレームを実装する方法は次のとおりです。 効果: コードは次のとおりです。 html: <div class="img-box"> <img class="code" src="https://image-static.segmentfault.com/149/570/149570997-5b987cc928d69_articlex"> </div> css: .img-ボックス{ 背景: linear-gradient(#ae0000, #ae0000) 左上、 linear-gradient(#ae0000, #ae0000) 左上、 linear-gradient(#ae0000, #ae0000) 右上、 linear-gradient(#ae0000, #ae0000) 右上、 linear-gradient(#ae0000, #ae0000) 右下、 linear-gradient(#ae0000, #ae0000) 右下、 linear-gradient(#ae0000, #ae0000) 左下、 linear-gradient(#ae0000, #ae0000) 左下; 背景繰り返し: 繰り返しなし; 背景サイズ: 2px 20px、20px 2px; 高さ: 116px; 幅: 116ピクセル; } .コード { 高さ: 110px; 幅: 110ピクセル; 上マージン: 2px; 左マージン:2px; 境界線: 1px 実線 #ae0000; } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 |
<<: WeChatミニプログラムでトークンの有効期限を処理する方法
>>: tomcat デプロイメント プロジェクトの実装と IDEA との統合
目次いつ使うか構造的ブランチコードいつ使うか選択動作を完了するには、2 つの列間で要素を直感的に移動...
2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...
ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...
JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。要件: 入力値は数...
目次序文: 1. vue-cliでプロジェクトを作成する2. ルーターをインストールする3. ディレ...
一般的なアプリケーションでは、timestamp、datetime、int 型を使用して時間形式を保...
私はパフォーマンス テストを行うために常に Loadrunner を使用してきました。 Loadru...
<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだ...
この初心者は、Docker を学び始めたばかりの頃にこのような問題に遭遇しました。記録しておきます。...
今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...
効果図: 全体的な効果: ビデオ読み込み中: 写真:ステップ1: HTML要素を作成するまず、HTM...
サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
目次1. ファイルをインポートする2. HTMLページ3. メインコード4. 画像をbase64に変...
問題の説明最近、Springbootプロジェクトを構築していたところ、会社のネットワークケーブルに接...