面接まとめ【css編】-css 3新機能

1.css 3のキーフレーム
@keyframesルールは、アニメーションシーケンスでキーフレーム(またはwaypoints)のスタイルを定義することによって、CSSアニメーションシーケンスの中間ステップを制御します.これ
変換よりもアニメーションシーケンスの中間ステップを制御できます.

@keyframes slidein {
    from {
        margin-left: 100%;
        width: 300%;
    }

    to {
        margin-left: 0%;
        width: 100%;
    }
}    

JavaScriptはCSSオブジェクトモデルインタフェースCSSKeyframesRuleを介して@keyframesに問い合わせることができる
キーフレームを使用するには、まず名前付き@keyframesルールを作成し、animation-nameというプロパティを使用してアニメーションをキーフレーム宣言と一致させるようにします.各@keyframes規則は、アニメーションの進行中に、どの段階でこのフレームに含まれるスタイルをトリガするかを表す名前として、各キーフレームに複数のキーフレーム、すなわちスタイルブロック文を含む.
2.色の表示方法:rgba
3.transparent、透明度を制御します(これは三角形を実現できます)

div {
　　width: 0;
　　/* border-top: red solid 5px;
　　border-left: transparent solid 5px;
　　border-bottom: transparent solid 5px;
　　border-right: transparent solid 5px; */
　　border: 16px solid red;
　　border-color: transparent red transparent transparent;}

4.枠線の属性
(1)ボーダーフィレット
border-radius:左上隅右下隅左下角
(2)ボーダーシャドウ
box-shadow:水平距離垂直距離ぼかし距離シャドウサイズ色inset(インナーシャドウ)
(3)外枠画像
5.テキスト属性
1)テキストシャドウ
text-shadow:2 px(水平、負数可能)3 px(垂直、負数可能)2 px(曖昧距離、負数不可)red;
2)テキストストローク
-webkit-text-stroke:幅の色
3)オーバーフロー省略
text-overflow:ellipse(省略記号);overflow:hidden;white-space:nowrapで使用します.
6.css 3グラデーション
転載先:https://www.cnblogs.com/still1/p/10856971.html