ホームページ > 記事 > ウェブフロントエンド > CSS3 に追加される新しいプロパティ
CSS3 に追加される新しいプロパティ
- 清浅オリジナル
- 2018-11-26 17:26:3018489ブラウズ
CSS3 の新しいプロパティには、1. テキストのシャドウ、2. 背景のグラデーション、4. 要素の回転、6. フォントの変更などがあります。
【おすすめコース: CSS3チュートリアル】
CSS3テキストシャドウ
<div style="text-shadow: 5px 5px 5px #444;">这是一行文字</div>
CSS3 背景グラデーション効果
CSS3 の線形グラデーション プロパティは、今のところ Safari 4、Chrome でのみ利用可能です。および Firefox 3.6 でサポートされます。dc4bdbf87cf6b13b96a0e690e9f65b5a16b28748ea4df4d9c2150843fecfba68
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。