境界線スタイルには完全境界線と単一境界線のスタイルがあり、各辺に異なるスタイルを設定できます
次のコード 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 サイトにご注意ください。