ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSボックスの境界線スタイルの紹介
CSSボックスの境界線スタイルの紹介
- 高洛峰オリジナル
- 2017-03-04 16:56:502408ブラウズ
境界線スタイルには完全境界線と単一境界線のスタイルがあり、各辺に異なるスタイルを設定できます
次のコード P1 は完全境界線スタイルで、P2 は単一境界線に異なるスタイルを設定します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css边框样式</title>
<style>
#p1{
background: yellowgreen;
border:4px dotted rebeccapurple;
border-radius: 20px;
width:200px;
text-align:center;
padding:5px;
color:#fff;
font-weight:bold;
}
#p2{
background: rebeccapurple;
border:4px dashed skyblue;
border-radius: 5px;
width:200px;
text-align:center;
padding:5px;
color:#fff;
font-weight:bold;
border-bottom-color: palegreen;
border-top-style: dotted;
}
</style>
</head>
<body>
<p id="p1">这是一段测试文字</p>
<p id="p2">这是一段测试文字</p>
</body>
</html>CSS に関連するその他の記事box border style PHP 中国語 Web サイトにご注意ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSS3を使って星を作る方法次の記事：CSS3を使って星を作る方法