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の長期無料利用の実施手順
推薦する
UI を通じて Docker を管理する方法
Docker はますます多くのシナリオで使用されています。コマンドラインツールに慣れていない人にとっ...
Zabbix を使用して Oracle データベースを監視する方法の詳細な説明
1. 概要Zabbix は非常に強力で、最も広く使用されているオープンソースの監視ソフトウェアです。...
CSS のグリッドプロパティの使用に関する詳細な説明
グリッドレイアウト親要素に追加された属性グリッドテンプレートの列/グリッドテンプレートの行要素の行ま...
マークアップ言語 - フレーズ要素
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
CentOS7 で docker を使用して Apollo 構成センターをデプロイする実装
Apollo オープンソース アドレス: https://github.com/ctripcorp/...
jsは古典的なマインスイーパゲームを実装します
この記事の例では、古典的なマインスイーパゲームを実装するためのjsの具体的なコードを参考までに共有し...
Linux で crontab 出力リダイレクトが有効にならない問題の解決方法
質問LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
Vue nextTickの原理の分析
目次イベントループmiscroTask (マイクロタスク) UI レンダリング (重要なポイント)次...
インタラクティブデザインでページングと読み込みのどちらを選択するかについての説明
この記事の著者@子木yoyoが個人ブログに投稿したものです。 Web ページでもモバイル アプリでも...
vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する
VUE は vue-seamless-scroll を使用して、自動的にスクロールしていいねします。...
MySQLデータベースを定期的に自動バックアップする方法
データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...
HTML の著作権記号のフォント選択問題 (著作権記号をより美しくする方法)
1. 問題を発見する© は HTML の著作権記号ですが、間違ったフォントを選択す...
不規則な投影を実現するためのボックスシャドウとドロップシャドウのサンプルコード
border-radius で生成できる四角形やその他の図形に影を追加する場合 (「Adaptive...
MySQLはデータ復旧を実装するためにbinlogログを使用する
MySQL binlog は MySQL ログの中で非常に重要なログであり、データベースのすべての ...
計算機機能を実現するjsバージョン
この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...