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の長期無料利用の実施手順
推薦する
MySQL InnoDBセカンダリインデックスのソート例の詳細な説明
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
Alibaba Cloud CentOS7 サーバーの nginx 構成と FAQ の分析
序文：この記事は、jackyzm のブログ https://www.cnblogs.com/jack...
カルーセルアニメーションを実現するVueコンポーネント
この記事では、カルーセルアニメーションを実現するためのVueコンポーネントの具体的なコードを例として...
Logrotate は 2 時間ごとに Catalina.out ログローテーションを実装します
1. Logrotateツールの紹介Logrotate はログファイル管理ツールです。Linux に...
ウェブページでmp3またはフラッシュプレーヤーコードを再生する
コードをコピーコードは次のとおりです。 <オブジェクト id="player1&qu...
Linux 構成 SSH パスワードフリーログイン「ssh-keygen」の基本的な使い方
目次1 SSHとは何か2 SSHパスワードフリーログインを設定する2.1 必要なソフトウェアのインス...
Vueはスクロールロードテーブルを実装します
目次成果を達成する転がり荷重知識備蓄コンポーネントのパッケージ1. コンポーネントの命名2. 小道具...
mysql5.7.14 解凍版インストールグラフィックチュートリアル
MySQL は、コミュニティ エディション (コミュニティ サーバー) とエンタープライズ エディシ...
Javascript 操作メカニズム イベントループ
目次1. 4つのコンセプト1. JavaScriptはシングルスレッドです2. タスクキュー3. 同...
MySQL InnoDB ロック メカニズムの詳細な例
1. InnoDBのロック機構InnoDB ストレージ エンジンは、行レベルのロックとトランザクショ...
Vue ブラウザログアウトの実装例
目次1. beforeunload イベント2. アンロードイベント3. ソースコードプロジェクトの...
DockerでRabbitMqの共通クラスタとミラークラスタを構築する詳細な操作
目次1. RabbitMqの動作環境を構築する1.検索を通じてrabbitmqイメージを照会する2....
CocosCreator で物理エンジン ジョイントを使用する方法
目次マウスジョイント マウスジョイント距離ジョイント距離ジョイントモータージョイント直動ジョイント変...
MySQLでホワイトリストアクセスを設定する方法
MySQLでホワイトリストアクセスを設定する手順1. ログイン mysql -uroot -pmys...
DockerはGitを使用してJenkinsのリリースとテストプロジェクトの詳細なプロセスを実装します
目次1. Dockerをインストールする2. カスタムネットワークアドレスを作成する3. Docke...