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の長期無料利用の実施手順
推薦する
Reactでのこのリファレンスの詳細な説明
目次原因：以下を実行します: 1. コンストラクター2.レンダリング機能3.bind関数とarrow...
LinuxにKafkaをインストールする
目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...
MySQL 5.7.17 のインストールと設定のグラフィックチュートリアル
ブロガーはこう述べています。「私は『史上最も簡単な MySQL チュートリアル』という一連のブログ記...
JSにおける4つのデータ型判定方法
目次1. 型2. インスタンス3. コンストラクター4.toString() この記事では、4 つの...
設定操作からMySQLへのNULLが見つからない問題を解決する
興味深い発見:合計 1000 件のレコードを含むテーブルがあります。クエリ ステートメントは次のよう...
JS オブジェクト コンストラクター Object.freeze
目次概要例1) オブジェクトをフリーズする2) 配列をフリーズする3) 浅い凍結4) ディープフリー...
リモートログインとポート公開を防ぐためのLinuxサーバー構成IPホワイトリスト
序文ブロガーが使用しているサーバーは Alibaba Cloud から購入したものです。実際、Ali...
HTML インライン要素と HTML ブロックレベル要素の概要と違い
ブロックレベル要素の機能: • 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい...
mysql 8.0.16 winx64 および Linux でルート ユーザーのパスワードを変更する方法
データベースへの接続などの基本的な操作はご自身で行ってください。この記事ではパスワードの変更方法を中...
Centos7 での python3 のインストールとアンインストールに関するチュートリアル
1. Python 3をインストールする1. 依存パッケージをインストールしますyum instal...
6つの珍しいHTMLタグ
まず: <abbr> または <acronym>これら 2 つの記号は同じ意...
MySQLでヘッダー付きのCSVファイルをエクスポートする方法
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...
Linux での感嘆符コマンド (!) の使用の概要
序文最近、弊社では mbp の設定をしており、ssh を使うことが多くなりました。複雑なコマンドを書...
IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策
最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...
一般的な DIV タスク (パート 2) — DIV のエディターとさまざまな DIY アプリケーションへの変換
HTML5 で contentEditable 属性が導入されて以来、div は textarea ...