ホームページ > 記事 > ウェブフロントエンド > CSS3の新機能一覧
CSS3の新機能一覧
- 高洛峰オリジナル
- 2017-02-23 10:33:551364ブラウズ
ずっと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属性は背景画像の配置領域を指定します
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) を参照してください:
c9ccee2e6ea535a969eb3f532ad9fe89 @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */}p{font-family:myFirstFont;}531ac245ce3e4fe3d50054a55f265927
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('.myaction');
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中文网！ |