CSS 境界線の半分または部分的に表示される実装コード
|
1. 疑似クラスを使用して境界線の半分を表示する
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>疑似クラスを使用して要素の前または後にコンテンツを挿入する</title>
<スタイル>
div {
位置: 相対的;
幅: 300ピクセル;
高さ: 50px;
背景色: #bbb;
パディング: 4px
}
div:前{
コンテンツ： "";
位置: 絶対;
左: 0;
上: -2px;
幅: 50%;
高さ: 2px;
背景色: 赤
}
</スタイル>
<div>この div の「上境界線」が半分しかないことに注意してください</div>
</本文>
</html>
2. 絶対位置指定を使用し、境界線ボックスを追加する
<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>位置指定を使用すると、境界線の半分が表示されます</title>
<スタイル>
#ホルダー{
高さ: 50px;
幅: 300ピクセル;
位置: 相対的;
マージン: 10px;
背景色: #eee;
}
＃マスク {
位置: 絶対;
上: -1px;
左: 1px;
幅: 50%;
高さ: 1px;
背景色: 蘭色;
}
</スタイル>
<div id="ホルダー">
この div の「上部の境界線」が半分だけであることに注意してください <div id="mask"></div>
</div>
</本文>
</html>
半分または部分的に表示される CSS ボーダーの実装コードに関するこの記事はこれで終わりです。より関連性の高い CSS ボーダー コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: ファイルのダウンロードを実現する javascript Blob オブジェクト
>>: mysql5.7のインストールとNavicateの長期無料利用の実施手順
推薦する
すべてのブラウザとの完全な互換性を実現するために最適なプリセットを選択してください
各ブラウザの select タグのプロパティと各ブラウザのサポートが多少異なるため、各ブラウザでの選...
Docker を使用した Laravel アプリケーションのデプロイ例
この記事で使用されているPHPベースイメージはphp:7.3-apacheです。この記事の Lara...
Nginx のパラメータをオンにして Web パフォーマンスを 3 倍向上させる方法
1. 遭遇したいくつかの問題2008 年にパフォーマンス テストを行っていたとき、パフォーマンス テ...
シェルを使用して複数のサーバーでバッチ操作を実行する方法
目次SSHプロトコルパスワード接続プロセスsshツールssh公開鍵ログインバッチ操作複数サーバーファ...
Linux viコマンドの知識ポイントと使い方のまとめ
Linux viコマンドの詳しい説明vi エディタは、すべての Unix および Linux システ...
Zabbix 5.0 ディスク自動検出と読み取り/書き込み監視の問題を分析する
ディスクを自動的に検出する構成キーの値注: このキー値は Linux プラットフォームでのみサポート...
vue+django でファイルをダウンロードする例
目次1. 概要2. Django プロジェクト3. Vueプロジェクト1. 概要プロジェクトで、ダウ...
一般的な XHTML タグの紹介
<br />しばらくの間、多くの人が XHTML の使い方を知らないことに気付きました。...
HTMLボタンを中央に配置する方法
HTML ボタン自体を中央に配置するにはどうすればよいでしょうか? このアイデアは簡単に見つかります...
MySqlのインストールとアンインストールに関する詳細なチュートリアル
この記事では、MySqlのインストールとアンインストールのチュートリアルを参考までに紹介します。具体...
CentOS7.4 起動時の緊急モードへようこそメッセージに対する解決策
今日は仮想マシンを使って実験をしました。システムをインストールし、いくつかのオプションを最適化した後...
JS を使用してバイナリ ツリー トラバーサル アルゴリズムのサンプル コードを実装する
目次序文1. バイナリツリー1.1. 二分木の走査1.2. jsを使用してバイナリツリーを表現する1...
LinuxにDockerをインストールする（非常に簡単なインストール方法）
最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...
MySQL 8.0 の新機能: ハッシュ結合
MySQL 開発チームは、2019 年 10 月 14 日に MySQL 8.0.18 GA バージ...
Linuxディレクトリ構造の詳細な紹介
Linuxを学び始めるときは、まずLinuxの標準ディレクトリ構造を理解する必要があります。 / r...