ホームページ > ウェブフロントエンド > htmlチュートリアル > border 属性を使用して小さなシンボルを作成する_html/css_WEB-ITnose

border 属性を使用して小さなシンボルを作成する_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 12:05:40
オリジナル
1168 人が閲覧しました

過去 2 日間勉強していたときに、ウェブサイト上で小さなシンボルを見つけ、それが挿入された画像だと思いましたが、検索しても画像のアドレスが見つかりませんでした。最後にクラスメイトに聞いたところ、border属性を使って作られていることが分かりました。

シンボルは右に示すとおりです:

CSS コードは次のとおりです:

.fuhao{    position:absolute;    top:12px;    left:12px;    width:0px;    height:0px;    overflow:hidden;    border-width:6px 0px 6px 6px;    border-color:transparent #A92222;    border-style:dashed none dashed solid;}
ログイン後にコピー

ここでは空の div、fuhao を使用し、その位置を定義した後、その高さと幅を 0 にしますが、境界線は幅があります。したがって、この div 内には何もなく、境界線だけが存在します。

論理的には次のようになります:

次に、次のステートメントにより、上下の境界線が透明になり、右の境界線が 0px になり、シンボルが取得されます。

実はよく分かりませんが、見たままに枠線を使ってシンボルを作るのはとても面白いと思います。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート