CSS3背景関連スタイルサンプルコードの詳細説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3背景関連スタイルサンプルコードの詳細説明

高洛峰

Mar 16, 2017 am 09:47 AM

css3

この記事では、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に追加します:

使用方法は次のとおりです: ダウンロードして配置しますサーバーディレクトリにあります

次のコードを

に記述します:

.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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。