コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS について理解する borders_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:32:18
オリジナル
1420 人が閲覧しました

目次 [1] 基本スタイル ボーダースタイル ボーダー幅 ボーダーカラー [2] 4つの値の順序 [3] CSS3スタイル border-colors border-radius box-shadow border-image [4] 注意事項

基本スタイル

ボーダー

ボーダーは、ボーダーの太さ（ボーダーの幅）、ボーダーの色、ボーダーのスタイルなど、スペースで区切られたスタイルの集合であり、順序は関係ありません

border: border-width border-color border-styleborder: 1px solid red;
ログイン後にコピー

ボーダーのスタイル

If a border has no style, the border will not contain all

border-style:none(默认)border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)
ログイン後にコピー

Border width

ボーダーの幅は負の値にすることはできず、パーセンテージ値として指定することもできません

border-width: thin/medium(默认)/thick/<length>
ログイン後にコピー

Border color

デフォルトborder color は要素自体の前景色ですが、表では、border-style のみを設定し、border を設定しなかった場合、境界線の色はテキストの色と同じではなく黒になります

border-color: transparent/<color>
ログイン後にコピー

<。 ;デモボックス> 以下の対応する属性値をクリックしてデモを行います

片面ボーダー

border-top/border-right/border-bottom/border-left
ログイン後にコピー

12 種類のボーダースタイル

border-width:    border-top-width    border-right-width    border-bottom-width    border-left-widthborder-style:    border-top-style    border-right-style    border-bottom-style    border-left-styleborder-color：    border-top-color    border-right-color    border-bottom-color    border-left-color
ログイン後にコピー

キーポイント

4 値注文

border-width: 1px 2px 3px 4px;//上右下左border-width: 1px 2px 3px;//上(左右)下border-width: 1px 2px;//(上下)(左右)border-width: 1px;//(上下左右)
ログイン後にコピー

CSS3 style

Multi-color border border-colors 

border-colors:<color><color>……
ログイン後にコピー

border: 10px solid black;-moz-border-top-colors: red green;-moz-border-right-colors: green yellow;-moz-border-bottom-colors: yellow blue;-moz-border-left-colors: blue red;
ログイン後にコピー

[注] Firefox でのみサポートされており、-moz- prefix を追加する必要があり、4 つの辺を個別に記述することのみが可能です。無効となります

Rounded border border-radius (IE8-notsupported)

border-radius: none(默认)border-radius: <length>{1,4}[/<length>{1,4}]?//如果反斜杠存在，前面的值是水平方向的半径，后面的值是垂直方向的半径。如果没有则水平和垂直方向相等。
ログイン後にコピー

4つの値の順番は左上、右上、右下、左下です

[注1]< ;length> は特定の値またはパーセンテージにすることができますが、負の数値は指定できません

[注 2] border-radius をリセットすると角が丸くなりません。none を使用するのは無効です。値は 0 である必要があります

[注 3] border -radius は には影響しません

【角丸一重】

border-top-left-radius/border-top-right-radius/border-bottom-right-radius/border-bottom-left-radiusborder-top-left-radius: 10px 20px;
ログイン後にコピー

[注意] 単角丸を書く場合 無加法/

【4 値の順序】

4 値の順序は左上、右上、右下、左下

border-radius: 10px 20px 30px 40px / 20px 30px 40px 50px;
ログイン後にコピー

【内径と外径】

border-radius 内径 = 外径 - 対応するボーダー幅

border-radius 半径の値が以下の場合境界線の幅、要素には内径効果はありません

【特殊グラフィック】

Circle

要素の幅と高さは同じで、フィレット半径は幅と高さの半分です

div{    width: 100px;    height: 100px;    border-radius: 50%;}
ログイン後にコピー

半円

要素の幅と高さが異なり、フィレット半径は幅と高さに一致する必要があります

div{    width: 100px;    height: 50px;    border-radius: 50px 50px 0 0;}
ログイン後にコピー

扇形

要素の幅と高さとフィレット半径は同じです

div{    width: 50px;    height: 50px;    border-radius: 50px 0 0 0;}
ログイン後にコピー

Oval

要素の幅と高さは異なり、水平半径と垂直半径はそれぞれ幅と高さに対応します

div{    width: 120px;    height: 80px;    border-radius: 120px/80px;}
ログイン後にコピー

盒子阴影box-shadow

box-shadow: none(默认)box-shadow: (h-shadow v-shadow blur spread color inset)+;
ログイン後にコピー

h-shadow: 水平阴影位置(必须)v-shadow: 垂直阴影位置(必须)blur:     模糊距离(可选)spread:   阴影尺寸(可选)color:    阴影颜色，默认和文本颜色一致(可选)inset:    内部阴影(可选)
ログイン後にコピー

box-shadow:10px 10px red,20px 20px blue;
ログイン後にコピー

　　[注意1]可以使用多重阴影，但使用过多会造成性能差

　　[注意2]边框在内阴影之上，内阴影在背景图片之上，背景图片在背景色之上，背景色在外阴影之上

　　[注意3]内阴影对元素没有任何效果

　　[注意4]最先写的阴影在最顶层

【模拟边框】

box-shadow: 0 0 0 10px blue;
ログイン後にコピー

　　 <演示框>点击下列相应属性值可进行演示

图片边框border-image(IE10-不支持)

border-image: none(默认)border-image: border-image-source || border-image-slice [ / border-image-width? | / border-image-outset ]? || border-image-repeat;
ログイン後にコピー

　　[注意]该属性的作用是用来替代border-style的，若border-image为none,则显示border-style的值

border-image: url('img.img') 27 fill / 27 / 27px repeat;
ログイン後にコピー

【border-image-source】

　　边框的图片路径

border-image-source:url('test.img');
ログイン後にコピー

【border-image-slice】

　　图片边框四条切割线的位置

border-image-slice:  <number> | <percentage> fill
ログイン後にコピー

　　[注意0]不给写单位，具体值默认单位是px

　　[注意1]fill表示图片边框的中间部分将保留下来

　　[注意2]四值方向是上右下左，代表切割线的方向，切割的分别是高宽高宽

　　[注意3]图片边框是在边框范围内显示的，若边框宽度不等于slice切片值，则图片边框会按比例放大缩小，以使图片边框正好显示在边框范围内

　　[注意4]若slice值为负，或大于盒子的宽度或高度会被100%，四个角将显示整个背景图片

　　[注意5]若右切和左切大于盒子宽度，则上中和下中部分为空；若上切和下切大于盒子高度，则左中和右中部分为空

【border-image-width】

　　边框宽度

border-image-width: <length> | <percentage> | <number> | auto
ログイン後にコピー

　　[注意1]若指定则边框图片宽度由该值确定，否则由盒子的边框宽度来确定

　　[注意2]可以用具体像素、数字(表示几倍)以及百分比来表示

　　[注意3]遵循四值顺序

【border-image-outset】

　　边框图像区域超出边框的量

border-image-outset:0(默认)border-image-outset: <length> | <number>
ログイン後にコピー

　　[注意1]可以用具体像素和数字(表示几倍)来表示

　　[注意2]遵循四值顺序

【border-image-repeat】

　　边框图片的排列方式

border-image-repeat: stretch(拉伸,默认) | repeat(重复) | round(平铺) [1,2]//第一个值表示水平方向的排列方式，第二个值表示垂直方向的排列方式
ログイン後にコピー

　　[注意1]repeat是边框中间向两端平铺，可能造成两端边缘被切的现象

　　[注意2]round会对边框背景图的切片进行缩放，使其正好显示

 

注意事项

　　【1】边框绘制在元素背景之上(有兼容问题)

　　【2】同一元素的边框相交处是斜线

　　【3】可以用边框实现三角形

　　【4】行内元素的上下边框由于不影响行高，不影响布局；左右边框会影响布局

関連ラベル：
理解CSS边框
ソース：php.cn
前の記事：古典的なCSS_html/css_WEB-ITnoseを使用した三角形アイコンの原理の分析 次の記事：HTML5 の非推奨および更新された要素と属性_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
hr タグが単色白に設定されているのに半透明になるのはなぜですか? HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
から 2024-04-06 16:13:26
0
1
500
ナビゲーションバーの下枠のCSS ナビゲーション バーがあり、リスト内の項目にカーソルを置くと下部に赤い線を追加しましたが、その赤い線をタイトル (例: 「サービス」) の下に移動したいのですが、これを実現する方法...
から 2024-04-06 15:04:41
0
2
347
透過的なブラウザを起動して、Web アプリケーションと PWA のエクスペリエンスを向上させます [静的 HTML、CSS、JavaScript をサポート] [ユーザーが Web アプリケーション/PWA でデスクトップの壁紙を表示できるようにします] 私は現在、ソケットを使用した Web アプリケーション (チャット) を開発しているジュニアのフロントエンド開発者兼デザイナーです。私と友人が使用している言語は、Scala、HTM...
から 2024-04-05 13:50:12
0
1
1367
ルート ノードのリスト項目シンボル (<ul> および <ol>) は CSS で表示および削除できず、overflow-x: hidden の問題は解決できません。 現在、Web ページの作成に取り組んでいますが、リスト項目に問題があります。通常、各リスト項目の横に表示されるドットと数字は表示されません。また、CSS プロパティの overfl...
から 2024-04-04 16:38:22
0
1
3617
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート