ホームページ > 記事 > ウェブフロントエンド > CSSでタイトルの影の境界線を設定する方法
CSSでタイトルの影の境界線を設定する方法
- 奋力向前オリジナル
- 2021-09-09 11:33:074261ブラウズ
方法: 1. border 属性を使用して、構文 "border:width style color;" でタイトル要素に境界線を追加します。 2. "text-align: center" を使用してタイトル テキストを中央に配置します。 ; 3. box-shadow プロパティを使用して、タイトル要素の境界線に影の効果を追加します。
このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。
cssタイトルの影の境界線を設定するにはどうすればよいですか?
cssタイトルに影の境界線を追加する方法について話しましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div
{
width:200px;
height:200px;
border:2px solid red;
text-align: center;
margin: 20px auto;
line-height: 200px;
box-shadow: red 10px 30px 5px;
}
</style>
</head>
<body>
<div>php中文网</div>
</body>
</html>コード効果
cssシャドウボーダーの使用構文:
属性: box-shadow
使用方法: div{box-shadow: 001px #000inset;}
シャドウ使用分析: 最初のゼロは、左側からの距離 0 を表します。オブジェクトを指定し、影の表示を開始します。2 番目の 0 は、オブジェクトの距離が 0 であることを意味し、影の表示が開始されます。1px は影の範囲を表します。1px , #000 は影の色を表し、inset はオブジェクトの内側の影を意味し、オブジェクトの外側には影は設定されません。
互換性の問題: Firefox バージョン 3.5 および Google は、box-shadow 属性をサポートできます。
推奨学習: CSS ビデオ チュートリアル
以上がCSSでタイトルの影の境界線を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。