css3のborder属性の使い方

php中世界最好的语言
リリース: 2018-03-21 16:47:22
オリジナル
1469 人が閲覧しました

今回はcss3 border属性の使い方を紹介しますcss3 border属性を使用する際の注意点を実際に見てみましょう。

CSS3 のボーダー。これは私たちにとって、border:1px を何度も書いたことでしょう...それでは、CSS3 は私たちにどんな驚きをもたらしてくれるでしょうか?

CSS3 では、境界線に 4 つの新しい機能があります

1.Border-color(境界線の色を設定します)

2.Border-image(画像を通して境界線として設定します)

3.Border -radius (枠線の半径)

4.box-shadow (影効果)

私が使用しているブラウザのバージョンは、IE8、FireFox10.0.9、Chrome 22.0.1229.94、Safari 5.1.7、Opera 12.50です。 。 。基本的には最新版です

以前pに枠線を付けたいときはこんな風に書きました

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red;    
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>常用的边框样式</p>
</body>
</html>
ログイン後にコピー

border-color

枠線の色は既に設定できるので、なぜ必要がありますか? 境界線の色についてはどうですか? CSS3のボーダーが違うので

ボーダーの幅をXに設定する場合はborder-colorを使います。次に、この境界線に X 色を使用して、各色が 1 ピクセルの幅を表示できるようにします (PS: 境界線の幅が 10 ピクセルで、5 色のみを設定した場合、最後の色が以下の残りの幅を埋めます)。具体的な書き方は以下のコードを参照してください

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            border-color:red blue green black;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-color样式</p>
</body>
</html>
ログイン後にコピー

しかし、結果は私たちが考えていたものと異なります

4つの色に対応する4つの境界線しか見えませんでした。

もちろん、3 色だけを入力した場合、中央の色は左右に対応します。実際に試してみてください。

それでは、前に説明した 1 ピクセルあたり 1 色の効果はどうなるでしょうか。 「この境界線には X 色を使用できます。」

上記の効果を実現する必要がある場合は、border-color は 4 つの境界線全体を対象とするものではないため、ご心配なく。ある国境のために。それらは次のとおりです:

    border-top-color
  1. border-right-color
  2. border-bottom-color
  3. border-left-color
  4. したがって、コードを変更する必要があります
<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -moz-border-bottom-colors:Blue Yellow Red Black Green;
            -moz-border-right-colors:Blue Yellow Red Black Green;
            -moz-border-left-colors:Blue Yellow Red Black Green;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-color样式</p>
</body>
</html>
ログイン後にコピー

実行後

はっきりと見えませんが、確かに各ピクセルに色があるので、グラデーションカラーを作成する場合に非常に便利です。あとは色を調整するだけです

.border_test
        {
            border:5px solid red; 
            -moz-border-top-colors:Blue Yellow Red Black Green;
            -ms-border-top-colors:Blue Yellow Red Black Green;
            -wekit-border-top-colors:Blue Yellow Red Black Green;
            -o-border-top-colors:Blue Yellow Red Black Green;
            border-top-colors:Blue Yellow Red Black Green;
        }
ログイン後にコピー
しかし、この効果は Firefox でのみ表示されることがわかりました。つまり、border-border-colors プロパティは Firefox でのみ使用可能で、他のプロパティは互換性がありません。残念です...

Border -imageborder-imageは主に境界線を埋めるために画像を使用します。

border-imageの分解属性は

    border-image-sourceです。ボーダーの背景画像のURLを指定します
  1. border -image-sliceは、画像のスライス方法、非位置決めのプロパティを設定します!
  2. border-image-widthはボーダー画像の表示領域を定義します
  3. border-image-repea
  4. 一つずつ解析していきましょう

border-image-source

これを指定します。境界線の背景画像の URL (例:

border-image-source :url(../images/border.gif);
ログイン後にコピー

) は none、つまり背景画像なしに設定できます

border-image-slice

设置图片如何切割的属性,(重点理解)他的值是四个数值, 没单位(实际上是已经固定是px了, 注意, 这个值不能是负值或大于图片的尺寸), 例如: border-image-slice:1 2 3 4; 你想得没错, 同样对应的是”上右下左”,将这几个数值, 把背景图片, 切割开来,具体一会再说

border-image-width

定义border-image的width, 这个是定义border-image的显示区域的(这个只是在w3c上描述的, 但在实际测试过, 设置这个属性没有作用, 但是border-width能生效)

border-image-repeat;

repeat有三个值选择

[ stretch | repeat | round ]:拉伸 | 重复 | 平铺 (其中stretch是默认值。)

好了,我们回头来看slice,也就是切割.= =说实话,不知道该怎么讲,还是上图吧.

                                       

左上图是一个这样的样式.border-image-slice:10 15 20 25; 他会将图片分割为右上边这样的9宫格图片.

left,top,right,bottom分别是你设置的距离,这一部分会被抽取出来作为边框.

top-left,  top-right, bottom-left, bottom-right同样会被抽取出来,与left,top,right,bottom不同的是,他们不会受repeat,stretch,round的影响.

而left,top,right,bottom,则有可能因为拉伸什么的而改变宽度和高度.不知道这样说会不会容易理解点?

下面看代码

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            -webkit-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -moz-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -o-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -ms-border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            -border-image: url(6.jpg) 0 12 0 12 stretch stretch;
            display: block;
            
            border-width: 0 12px;
            padding: 10px;
            text-align: center;
            font-size: 16px;
            text-decoration: inherit;
            color:white;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-image样式</p>
</body>
</html>
ログイン後にコピー

效果如下

 

用的材料图是

 

同样可惜的是,我这里只有FireFox和Safari出了效果,当然这也不能排序Chrome不能,因为听说有几个版本的可以。 

Border-radius

终于到圆角了,感觉花了那么多字去写css3有点怪,因为本来很简单的- -哈

border-radius

参数:半径,不可以是负数,为0的话是直角

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-border-radius:15px;
            -ms-border-radius:15px;
            -wekit-border-radius:15px;
            -o-border-radiuss:15px;
            border-radius:15px;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-radius样式</p>
</body>
</html>
ログイン後にコピー

效果

 

圆角效果是比较常见的,而且在FireFox,Chrome,Safari,Opera都支持圆角效果,可惜IE还是只能回老家喝粥.不过据说IE9支持了。

相关属性: border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius

分别对应一个位置,需要注意的是,如果只有一个,会变成4分之1圆角,如果这4个里其中一个为0,那就回变成直角- -这个我也很纳闷.

box-shadow

最后一个,阴影

<html>
<head>
    <style type="text/css"> 
        .border_test
        {
            border:5px solid red; 
            -moz-box-shadow:5px 2px 6px black;
            -ms-box-shadow:5px 2px 6px black;
            -wekit-box-shadow:5px 2px 6px black;
            -o-box-shadow:5px 2px 6px black;
            box-shadow:5px 2px 6px black;
        }
    </style>
</head>
<body>
    <p class=&#39;border_test&#39;>CSS3 Border-shadow样式</p>
</body>
</html>
ログイン後にコピー

 

三个像素值和颜色分别是

阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

BFC模式详解

hrefとsrc、linkと@importの違いは何ですか

CSSでの属性値の継承の使用方法

以上がcss3のborder属性の使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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