CSS3 に追加される新しいプロパティ-CSSチュートリアル-php.cn

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

清浅

リリース： 2021-04-18 14:54:26

オリジナル

18488 人が閲覧しました

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 でサポートされます。

<div style="width:200px;height:100px;
background-color: #1a82f7;
background-repeat: repeat-x;
background: -webkit-linear-gradient(top, #2F2727, #1a82f7); "></div>

ログイン後にコピー

Image 24.jpg

CSS3 カラー効果

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

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

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

ログイン後にコピー

CSS3 変換 (要素の回転)

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

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

ログイン後にコピー

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>

ログイン後にコピー

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

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

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