検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 に追加される新しいプロパティ

CSS3 に追加される新しいプロパティ

清浅
清浅オリジナル
2018-11-26 17:26:3018503ブラウズ

CSS3 の新しいプロパティには、1. テキストのシャドウ、2. 背景のグラデーション、4. 要素の回転、6. フォントの変更などがあります。

CSS3 に追加される新しいプロパティ

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、css3 バージョン。

今日は、CSS3 の新しいプロパティを紹介します。これは、皆さんの参考になれば幸いです。

CSS3 の最新バージョンの登場により、Web デザインがより簡単になりました。すべてのブラウザがサポートしているわけではありませんが、しかし、テクノロジーの急速な変化により、CSS3 のモジュール標準化により、すべてのブラウザが完全な CSS3 サポートを実装できるようになりました。近い将来、CSS3 と HTML5 がインターネットの未来になると考えています。

ブラウザ互換性の問題の新機能:

Firefox にはプレフィックス -moz- が必要です。

Chrome と Safari にはプレフィックス -webkit- が必要です。

【おすすめコース: CSS3チュートリアル】

CSS3テキストシャドウ

<div style="text-shadow: 5px 5px 5px #444;">这是一行文字</div>

Image 23.jpg

CSS3 背景グラデーション効果

CSS3 の線形グラデーション プロパティは、今のところ Safari 4、Chrome でのみ利用可能です。および Firefox 3.6 でサポートされます。 


dc4bdbf87cf6b13b96a0e690e9f65b5a16b28748ea4df4d9c2150843fecfba68

Image 24.jpg

CSS3 カラー効果

不透明度が追加されました

rgb は CSS で使用されます。要素の色ですが、CSS3 には色の不透明度を設定できる新しい操作があり、rgb が rgba に変換され、要素の不透明度を制御する方法が簡素化されています。 

<div style="width:50px;height:50px;background-color:rgba(123,123,123,0.4);"></div>

Image 27.jpg

CSS3 変換 (要素の回転)

CSS3 では、要素を回転するための新しい変換属性が導入されています 

<div style="width:50px;height:50px;background-color: pink;-webkit-transform:rotate(40deg); ">旋转</div>

Image 25.jpg

CSS3 複数列レイアウト

Web レイアウトでは、各 Web ページを分割する必要がありますCSS3 で使用される複数列レイアウト プロパティは、必要な列数を指定して列数を作成するだけです。分離する必要があります

div.content{
width:210px;
border:1px solid #ccc;
/*将当前内容分成3列*/
-webkit-column-count:3;
-webkit-column-gap:25px;/*列之间的间隔*/
-webkit-column-rule:1px solid #ccc;/*规定列之间的宽度、样式和颜色规则*/
}
</style>
</head>
 <body>
  <div class="content">
	php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!
  </div>

Image 28.jpgCSS3 Web フォント

CSS3 は Web 上に任意のカスタム フォントを埋め込むこともできますページ、元のフォント クライアント システムによっては、Web ページはブラウザーまたはクライアント コンピューターでサポートされているフォントのみを表示できますが、@font-face 属性を使用すると、他の場所にあるフォントを使用できます#

@font-face
{
font-family: myFirstFont;
src: url(Sansation-Italic.ttf)
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>WWWWWW</div>

要約: 上記がこの記事の全内容です。CSS3 の新しいプロパティを理解するのに役立つことを願っています。

以上がCSS3 に追加される新しいプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 firefox css chrome safari css3 webkit count transform column
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSレイアウトに名前を付けるときに下線を避ける方法次の記事：CSSレイアウトに名前を付けるときに下線を避ける方法

関連記事

続きを見る