コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3の新機能一覧

CSS3の新機能一覧

高洛峰
リリース： 2017-02-23 10:33:55
オリジナル
1441 人が閲覧しました

ずっとCSS3に触れてきて、必要なときは直接使っていますが、きちんとまとめていなかったのでここで整理してみます。

CSS3 ボーダー:

角丸ボーダー:

キー: border-radius

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
width:350px;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
}
</style>
</head>
<body>

<div>圆角边框</div>

</body>
</html>
ログイン後にコピー

CSS3 ボーダーシャドウ:

キー: box-shadow

構文: オブジェクトセレクター {box-shadow:[シャドウモード, ]値が設定されていない場合、デフォルトの投影方法は外側のシャドウです。一意の値「inset」が使用される場合、投影は内側のシャドウです。

X-offset: シャドウの水平オフセット。その値は正または負です。値が正の場合、影はオブジェクトの右側にあります。値が負の場合、影はオブジェクトの左側にあります。

Y-offset: 影の垂直オフセットとその値。ポジティブにもネガティブにもなり得ます。正の値の場合、影はオブジェクトの下部にあります。その値が負の場合、影はオブジェクトの上部にあります。

シャドウのぼかし半径: このパラメーターはオプションですが、その値は次のとおりです。値が 0 の場合は、影にぼかし効果がないことを意味します。

影の拡張半径: このパラメータはオプションであり、値は正または正の値になります。値が正の場合は影全体が拡大され、値が負の場合は縮小されます。

影の色: このパラメータはオプションです。色を設定しない場合、ブラウザはデフォルトの色を使用しますが、各ブラウザのデフォルトの色は一貫性がありません。特に、Webkit カーネルの Safari および Chrome ブラウザの透明色と、Firefox/Opera の黒色 (検証されているため）、このパラメータは省略しないことをお勧めします。


CSS3 境界線画像:

キー: -webkit-border-image

例: 

p
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}
ログイン後にコピー

CSS3 背景:

background-size 属性は背景画像のサイズを指定します

p
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
ログイン後にコピー

background-origin属性は背景画像の配置領域を指定します

CSS3新特性罗列 

p
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}
ログイン後にコピー

CSS3複数の背景画像

body
{ 
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
ログイン後にコピー

CSS3 テキスト効果

CS S3テキストシャドウ

h1
{
text-shadow: 5px 5px 5px #FF0000;
}
ログイン後にコピー

CSS3 Word Wrap

p {word-wrap:break-word;}
ログイン後にコピー

新しい @font-face ルールでは、最初にフォントの名前 (myFirstFont など) を定義してから、フォント ファイルを指定する必要があります。

HTML 要素にフォントを使用するには、font-family 属性を通じてフォント名 (myFirstFont) を参照してください: 

<style> @font-face{font-family: myFirstFont;src: url(&#39;Sansation_Light.ttf&#39;),
     url(&#39;Sansation_Light.eot&#39;); /* IE9+ */}p{font-family:myFirstFont;}</style>
ログイン後にコピー

CSS3 2D 翻訳

翻訳: translation

p
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px);    /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);        /* Firefox */
}
ログイン後にコピー

rotation :rotate

p
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}
ログイン後にコピー

Scale:scale

scale() メソッドを使用すると、指定された幅 (X 軸) と高さ (Y 軸) パラメーターに従って要素のサイズが増加または減少します。 

p
{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}
ログイン後にコピー

Flip: skew

skew() メソッドを通じて、指定された水平線 (X 軸) と垂直線 (Y 軸) のパラメーターに従って、要素が指定された角度だけ反転されます: 

p
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}
ログイン後にコピー

CSS3 3D Transform

rotateX()

に沿って回転 あるスタイルから別のスタイルに変化するときに、要素に効果 (スムーズな遷移) を追加します。

幅、高さ、トランジションにトランジション効果を追加します: 

p
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}
ログイン後にコピー

概要:

開始状態と終了状態を与える必要があります、

それから p にトランジションを追加します: 広いトランジション時間、高い遷移時間、遷移遷移時間

transition:[宽 过渡时间][,高 过渡时间][,转换 过渡时间]
ログイン後にコピー

CSS3アニメーション

アクション@keyframesを設定

@keyframes myfirst
{
0%   {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
ログイン後にコピー

アクションクラスを設定

.myaction{
　　animation:myfirst 5s;
}
ログイン後にコピー

pにアクションクラスを追加

りー

注:

構文: 

$("...").addClass(&#39;.myaction&#39;);
ログイン後にコピー

name: @keyframes の名前

duration: アニメーションの完了にかかる時間を秒またはミリ秒で指定します。

timing-function: アニメーションの速度曲線を指定します。

タイミング関数値

説明

線形

均等速度
イーズ遅い速い遅い
イーズイン 低いスピードスタート
イーズアウト低速終了
イーズインアウト低速開始と終了
cubic-bezier(n,n,n,n)cubic-bezier関数の独自の値、0から1へ

delay：动画开始之前的延迟，秒。

iteration-count:规定动画播放的次数：具体数值或infinite（无限次）。

direction:规定是否轮流反向播放动画。normal正常播放，alternate轮流反向播放。

CSS3多列：

创建多个列对文本进行布局

p
{
-moz-column-count:3;     /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
ログイン後にコピー


CSS3用户界面

p
{
border:2px solid;
padding:10px 40px; 
width:300px;
resize:both;
overflow:auto;
}
ログイン後にコピー

 

CSS3的新特性就梳理到这里啦。个人觉得转换和动画是重点，需要好好掌握。

更多CSS3新特性罗列 相关文章请关注PHP中文网！

関連ラベル：
css3
ソース：php.cn
前の記事：CSS ブレンドモード 次の記事：Content-Type の偽装 - JSP を CSS として偽装する
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート