ホームページ > 記事 > ウェブフロントエンド > CSS3背景関連スタイルサンプルコードの詳細説明
CSS3背景関連スタイルサンプルコードの詳細説明
- 高洛峰オリジナル
- 2017-03-16 09:47:542045ブラウズ
この記事では、CSS3の背景関連スタイルのサンプルコード
background-image複数の写真を描画する例を以下に詳しく説明します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-image绘制多张图片叠加</title>
<style>
div{
width:1100px;
height:800px;
background-image: url("../../image/icon1.jpg"),url("../../image/border3.jpg");
background-repeat: repeat-x,no-repeat ;
background-position:100%,100%,center,center;
border:5px solid #ff0000;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
background-clip: の描画領域を指定します。背景:
background-origin: コンテンツボックスを基準にして背景画像を配置します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>background-clip及background-origin属性</title>
<style>
/*background-clip:规定背景的绘制区域：*/
/*background-origin:相对于内容框来定位背景图像：*/
div{
background: #fff000;
font-size: 30px;
border:10px dashed #0000ff;
padding:20px;
background-image: url("../../image/icon.png");
background-repeat:no-repeat;
}
.div2{
margin-top:30px;
background-origin: content-box;
background-clip: content-box;
}
.div3{
margin-top:30px;
background-origin: border-box;
background-clip: border-box;
}
.div4{
margin-top:30px;
background-origin: padding-box;
background-clip: padding-box;
}
</style>
</head>
<body>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
<div>这是一段测试文字</div>
</body>
</html>css3のbox-shadow属性:
ie6、7、および8はすべてborder-radiusをサポートします、box-shadow、text-shadowメソッド:ie-css3.htcを使用します
まずie-css3.htcスクリプトをダウンロードして、それをCSSに追加します:
使用方法は次のとおりです: ダウンロードして配置しますサーバーディレクトリにあります
次のコードを 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 に記述します:
.box{
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc);
}注: 動作: url(ie-css3.htc) 内の ie-css3.htc アドレスは、絶対パスで渡すか、渡す必要があります。 Web サイトのルート ディレクトリに直接移動します。そうしないと、効果が表示されない可能性があります。
•この htc ファイルを使用する場合、CSS に box-shadow、-moz-box-shadow、または -webkit-box-shadow が記述されていれば、IE はそれをレンダリングします。
•この htc ファイルを使用する場合、box-shadow: 0 0 10px red と書くことはできませんが、box-shadow: 0px 0px 10px
赤; それ以外の場合は IE で失敗します。
•RGBA値のアルファ透明度はサポートされていません。
•インサートインナーシャドウはサポートされていません。
•シャドウ拡張はサポートされていません。
•その他にどの色を設定しても、IE では影は黒でのみ表示されます。
ただし、このスクリプトでは、IE が一部の box-shadow 値をサポートすることのみが許可されます。
以上がCSS3背景関連スタイルサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。