ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3パイの使い方

CSS3パイの使い方

藏色散人
藏色散人オリジナル
2020-12-17 10:04:252150ブラウズ

css3 pie の使用方法: まず CSS3PIE プラグインをダウンロードし、次に pie.htc ファイルをプロジェクト フォルダーに配置し、次に「behavior: url(PIE .htc)」を追加し、最後にその場所を指定します。 htc ファイル。

CSS3パイの使い方

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

お勧め: 「css ビデオ チュートリアル

CSS3pie とは何ですか?

CSS3pie は非常に優れた CSS3 ツールで、IE6 から IE8 バージョンで角丸、影、グラデーションなどのほとんどの CSS3 変更機能を実装できます。このツールを使用すると、オンラインで必要な変更を行うことができます。即座に効果を発揮し、CSS コードを生成します。

css3pie の使い方

1. CSS3PIE プラグインをダウンロードします

ダウンロード アドレス: http://css3pie.com/download/GitHub https://github.com/lojjic/PIE/downloads

2.

を使用します。ダウンロードした圧縮ファイルには 3 つのファイルがあり、そのうちの 1 つは PIE.htc です。これは、IE6 ~ 8 で一部の CSS3 機能をサポートできるようにするプラグインです。 。

pie.htc ファイルをプロジェクトのフォルダーに置きます。

CSS コードに、css3 を使用する必要がある動作 url(PIE.htc) を追加します。htc ファイルの場所 (HTML ドキュメントに対する相対位置) を指定するだけです。

例:

角丸、影、グラデーションの 3 つの効果が含まれます。

.pie{
width: 200px; 
height: 100px;
line-height: 100px;
font-size:14px; 
border: 1px solid #669966; 
text-align: center;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666666 0 2px 3px;
-moz-box-shadow: #666666 0 2px 3px ;
box-shadow: #666666 0 2px 3px ;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));   
background: -webkit-linear-gradient(#EEFF99, #66EE33);   
background: -moz-linear-gradient(#EEFF99, #66EE33); 
-pie-background: linear-gradient(#EEFF99, #66EE33); 
behavior: url(PIE.htc);
position:relative;
z-index:10;
}

レンダリング:

CSS3パイの使い方

Web フロントエンド開発の詳細については、HTML 中国語 Web サイトをチェックしてください。 !

以上がCSS3パイの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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