CSSのborder-topプロパティの使い方-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのborder-topプロパティの使い方

silencement

May 26, 2019 pm 02:19 PM

CSSのborder-topプロパティの使い方

border-top 属性の定義と使用法

css では、border-top 属性は要素を配置するために使用される短縮属性です。上記の境界線のすべてのプロパティは 1 つのステートメントで定義されており、要素上の境界線の表示効果を個別に設定したい場合は、CSS の border-top 属性を使用してこれを実現できます。

border-top 属性によって定義される上枠属性: border-top-width (上枠の幅)、border-top-style (上枠のスタイル)、border-top-color (上枠の色) 。

border-top 属性の構文形式

css 構文: border-top:border-top-width border-top-style border-top-color; (例: border-top:1px 単色赤;)

JavaScript 構文: style.borderTop="border-top-width border-top-style border-top-color";(例: style.borderTop="border-top:1px sold red;")

説明

border-top 属性に設定されていない属性値があります。例: border-top: Solid red; も可能です。ただし、上枠スタイル (border-top-style) が以前に設定されていない場合、border-top 属性の 2 番目のパラメータも省略され、border-top 属性は無効になります。つまり、境界線の表示効果を設定するには、要素の境界線を定義する必要があります (デフォルトの要素の境界線は透明です)。透明な境界線の色または幅を設定すると、表示効果は表示されません。

border-top 属性値の説明

border-top-width: 上部の境界線の幅を設定します

border-top-style上境界線のスタイル

border-top-color 上境界線の色を設定します

inherit: 親要素から border-top 属性値を継承します。

例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css border-top属性设置上边框的显示效果笔记</title>
<style type="text/css">
body{background: #ddd;font-size:20px;}
#a,#b,#c{margin-top:10px;width:300px;}
#a{border-top:1px solid red;}
#b{border-top:solid #FFCCCC;}
#c{border-top:5px solid;}
</style>
</head>
<body>
<div id = "a">border-top:1px solid red;</div>
<div id = "b">border-top:solid #FFCCCC;</div>
<div id = "c">border-top:5px solid;</div>
</body>
</html>

ログイン後にコピー

以上がCSSのborder-topプロパティの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。