CSS3の境界線
CSS3 境界線
CSS3 境界線
CSS3 を使用すると、Photoshop などのデザイン プログラムを使用せずに、丸い境界線を作成したり、シャドウ ボックスや畫像を境界線として追加したりできます。
この章では、次の境界線のプロパティについて學(xué)習(xí)します:
Border-color (境界線の色を設(shè)定)
Border-image (畫像を通る境界線として設(shè)定)
Border-radius (境界線の半徑)
box - シャドウ（影効果）
私が使用しているブラウザのバージョンは、IE8、FireFox10.0.9、Chrome 22.0.1229.94、Safari 5.1.7、Opera 12.50です。 。 ?；镜膜摔献钚掳妞扦?/p>
プログラミング環(huán)境：VS2010 Ultimate Edition ASP.NET
以前divに枠線を付けたいときはこんな感じで書きました
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
}
</style>
</head>
<body>
<div class='border_test'>常用的邊框樣式</div>
</body>
</html>すでに枠線の色は設(shè)定できているので、なぜ境界線が必要なのでしょうか? -color についてはどうでしょうか? CSS3のボーダーが違うので
ボーダーの幅をXに設(shè)定する場(chǎng)合はborder-colorを使います。その後、殘りの幅を埋めるを使用できます)
具體的な書き込み方法については、以下のコードを參照してください
<html>
<head>
<style type="text/css">
.border_test
{
border:5px solid red;
border-color:red blue green black;
}
</style>
</head>
<body>
<div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>しかし、結(jié)果は私たちが考えていたものと異なります。
4つの色に対応する4つの境界線しか見えませんでした。下と左。
もちろん、3 色だけを入力した場(chǎng)合、中央の色は左右に対応します。実際に試してみてください。
それでは、前に説明した 1 ピクセルあたり 1 色の効果はどうなるでしょうか。 「この境界線には X 色を使用できます?！?
上記の効果を?qū)g現(xiàn)する必要がある場(chǎng)合は、border-color は 4 つの境界線全體を?qū)澫螭趣工毪猡韦扦悉胜い郡帷ⅳ葱呐浃胜?。ある?guó)境のために。
border-top-colorborder-right-colorborder-bottom-colorborder-left-color
そのため、コードを変更する必要があります
<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>
<div class='border_test'>CSS3 Border-color樣式</div>
</body>
</html>なぜ -moz- が前に追加されているのか疑問に思う人もいるかもしれませんが、これは問題ありません。ポータルをクリックして詳細(xì)を確認(rèn)してください。
「ポータル」を見た後、コードに修正を加えていました。
.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-image
border-image は主に
border の分解屬性を使用します。 -image は
border-image-source はボーダーの背景畫像の URL を指定しますborder-image-slice は畫像の切り取り方法、非位置決めのプロパティを設(shè)定します! border-imageの表示領(lǐng)域を定義する
border-image-width
border-image-repea
1つずつ分析してみましょう。
border-image-source
これは、ボーダーの背景畫像を指定するU(xiǎn)RLです。たとえば、
border-image-source: url(../images/border.gif);
これは none 、つまり背景のない畫像に設(shè)定できます。
border-image-slice
は畫像の切り取り方法の屬性を設(shè)定します (理解するための重要なポイント) その値は単位なしの 4 つの數(shù)値です (実際には)。 px に固定されています。この値は負(fù)の値や畫像のサイズより大きくすることはできません。例: border-image-slice:1 2 3 4; おっしゃるとおり、「top,」にも対応します。右、下、左」、これらの値を組み合わせて背景畫像を変更します。分割して後で詳しく説明します
border-image-width
border-image の幅を定義します。これにより、表示が定義されますborder-image の領(lǐng)域 (これは w3c でのみ説明されていますが、実際のテストではこれを設(shè)定します。屬性は効果がありませんが、border-width は有効になります)
border-image-repeat;
repeat には 3 つの値のオプションがあります
[ストレッチ | 繰り返し | ラウンド]: ストレッチ | 繰り返しタイル (ストレッチはデフォルト値です。)
<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>
<div class='border_test'>CSS3 Border-image樣式</div>
</body>
</html>Border-radiusようやく角が丸くなりました。CSS3を書くのに多くの単語を費(fèi)やすのは少し奇妙に感じます。元々は非常に単純です - はborder-radiusパラメータ:半徑、0の場(chǎng)合は直角です<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>
<div class='border_test'>CSS3 Border-radius樣式</div>
</body>
</html>角丸効果は比較的一般的であり、サポートされています。 FireFox、Chrome、Safari、Operaでは殘念ながらIEは故郷におかゆを飲むことしかできませんが、IE9では対応しているそうです。渡されません 4.関連屬性: border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius、border-top-left-radiusそれぞれが位置に対応していることに注意してください。はい、1つしかない場(chǎng)合は4分の1の角丸になります。4つのうち1つが0である場(chǎng)合は直角になります。これは私も非常に混亂しています。
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>
<div class='border_test'>CSS3 Border-shadow樣式</div>
</body>
</html>の3つのピクセル値と色は
影の水平オフセット値 (正と負(fù)の値を取ることができます);値); 影のぼかし値 ;影の色
は家でおかゆを飲むための IE であり、その他はすべて問題ありません。憂鬱
CSS3-BORDERも終わりました 初めてブログを書くのは気が引けますが、今後は忘れやすくなります。
CSS3 は確かに良いものですが、まだ書かれていないことがたくさんあります。しかし、學(xué)ぶ価値があるのは間違いありません。 。
デモも投稿してください。
