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の長期無料利用の実施手順
推薦する
ファイルのダウンロードを実現する javascript Blob オブジェクト
目次例示する1. ブロブオブジェクト2. フロントエンド3. バックエンド要約する例示する最近、ファ...
一般的な Linux ツール vi/vim の完全版
なぜvimを学ぶのかLinuxには多数の設定ファイルがあるため、Linuxには多くのテキスト処理ツー...
Windows 10 の仮想マシンに Mac システムをインストールするグラフィック チュートリアル
1. 仮想マシンバージョン15.5.1をダウンロードする公式サイトから直接最新バージョンをダウンロー...
Vue3 ドラッグ可能な左パネルと右パネルの分割コンポーネントの実装
目次コンポーネントの分解左パネル右パネル入力パラメータの分解小道具スロット具体的な実装ドラッグする方...
jsを使用して動的な背景を実現する
この記事の例では、動的な背景を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...
JavaScript 配列の詳細な概要
目次1. 配列誘導1. 文字列を配列に分割する2. コレクションとマップを新しい配列に変換する3. ...
MySQL 8.0 アトミック DDL 構文の詳細な説明
目次01 アトミックDDLの紹介02 一部のDDL操作の実行動作の変更03 DDL 操作のログを表示...
JavaScript 改ざん防止オブジェクトの使用例
目次JavaScript 改ざん防止オブジェクト1. 拡張不可能なオブジェクト2. 封印された物体3...
MySQL InnoDBセカンダリインデックスのソート例の詳細な説明
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
Linux に setup.py プログラムをインストールする方法
まず次のコマンドを実行します: [root@mini61 setuptools-8.2.1]# py...
MySQL で遅いファジークエリを最適化する方法
目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...
Nginx ロケーション設定のチュートリアル (ゼロから)
基礎位置の一致順序は、「最初に正規表現に一致し、次に共通表現に一致」です。実際のロケーションの一致順...
Vueバインディングクラスとバインディングインラインスタイルの実装方法
目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...
Vue補間式とv-textディレクティブの違い
目次1. プラグイン式を使用する2. プラグイン式でv-cloakを使用してちらつきの問題を解決する...
Vueのシンプルストアの詳しい説明
Vue におけるストアの最も単純な応用はグローバル ストレージです。ここでは、相互にジャンプするため...