CSS3の新機能-CSSチュートリアル-php.cn

css3 の新しいコンテンツには次のものが含まれます: 1. 特定の親要素を持つ要素を選択するために使用される子セレクター; 2. 別の要素の直後にある兄弟要素を選択するために使用される兄弟セレクター; 3. その他の兄弟セレクター; 4 . 構造擬似クラスセレクター; 5. 擬似要素セレクターなど

CSS3の新機能

#この記事の動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。

CSS3 の新しいコンテンツ:

##CSS3 の新しいコンテンツセレクター

子セレクター
子セレクターは、特定の親要素を持つ要素を選択するために使用されます

.box > p{
  background-color: pink}

ログイン後にコピー

兄弟セレクター

隣接する兄弟selector: 別の要素の直後にある兄弟要素を選択するために使用され、両方とも同じ親要素を持つ #

h1 + p{
  margin-top:50px;    满足h1相邻的p标签  }

ログイン後にコピー

他の兄弟セレクター

同じ親要素内の element1 の後のすべての element2 要素と一致します。 2 つの要素は同じ親要素です

h2 ~ p{
  background: ff0000;   和h2同级的其他选择器}

ログイン後にコピー

構造擬似クラスセレクター

nth-child(n) :n には数値、キーワード、数式を指定できます

一般的なキーワードでも: 偶数、奇数: 奇数

セレクター関数e :first-child 親要素の最初の子要素と一致します e 親要素の最後の e 要素と一致しますelement#e:nth-child(n)親要素の n 番目の子と一致します。要素 e タイプの最初の要素を指定します。 # を指定します ##疑似要素セレクター新しい疑似要素を追加します。ブラウザは単一コロンと二重コロンの両方を認識できます。二重コロンは h5 文法仕様です。疑似要素は二重タグにのみ追加できます。属性の内容:" ";


	e: last-child

#e:first -of-type	タイプ e
e:last-of -type	最後の
e 型 e:last-of-type	e 型の n 番目

は擬似要素内に記述する必要があります。インライン要素である要素の作成前後の擬似要素

のコロンの前にスペースを入れることはできません。

Selector

Function

e::aftere:first-lettere::first-line#属性セレクター

 input[name]{  选择input中带有name属性的选择器    width:30px;
    height:30px;
  }
  input[type="checkbox"]{  选择input中type="checkbox"属性的选择器    width:30px;
    height:30px;
  }
  input[type^="check"]{  包含input中type="check"开头属性的选择器    width:30px;
    height:30px;
  }
  input[class&="check"]{  包含input中class="box"结尾属性的选择器    width:30px;
    height:30px;
  }
   input[class*="eck"]{  包含input中含有class="eck"属性的选择器    width:30px;
    height:30px;

ログイン後にコピー

新しいセレクターの重み疑似クラスセレクターと属性セレクターの重みは、クラスセレクター

##e::before	in E 要素の前に要素を挿入します
E 要素の後に要素を挿入します
E コンテナの最初の文字が選択されています
E コンテナが選択されています	内のテキストの最初の行

疑似要素セレクターの重みはラベルセレクターと同じです

CSS3 ボックスモデル

css3 はボックスサイズ設定を通じて実現できます。ボックスモデルを指定して、設定できるようにします。要素の合計幅と合計高さを計算する方法

コンテンツボックス標準モード
ボックスの合計サイズは幅パディングボーダーであり、コンテンツ領域は幅と高さです Part

border-box奇妙なモードボックスのサイズは幅と高さで、パディングとボーダーを追加すると、コンテンツ領域が縮小します
ボーダーフィレットのボーダー半径
の円を設定しますborder Angular

border-radius: 100px/50px   分别设置水平方向和垂直方向半径border-bottom-right-radius: 50px; 单一属性设置右下角设置

ログイン後にコピー

text-shadow テキストシャドウ
水平方向の影、垂直方向の影、ぼかし距離、および影の色は属性値で指定できます text-shadow テキストシャドウ
水平方向の影、垂直方向の影、ぼかし距離、影の色は属性値で指定できます

##属性値##関数

#h-shadow必須、水平方向のシャドウ位置必須、垂直方向の影の位置#ぼかし距離##色##影の色マルチレイヤーシャドウ: 最初に書き込まれたシャドウは、後で書き込まれたシャドウにオーバーレイされます

	v-shadow
ぼかし
	## 文字阴影：水平位置垂直位置模糊程度颜色text-shadow: 10px 20px 5px #f00; ログイン後にコピー
box-shadow boxshadow	追加するために使用されます。ボックスの境界線に影を付ける
#属性値	関数

##h-shadow

必須、水平方向のシャドウ位置

v-shadow必須、垂直方向のシャドウ位置ぼかし距離##スプレッド##カラー##シャドウカラー外側のシャドウが内側のシャドウに変更されました

blur

#シャドウサイズ

inset

边框阴影：水平位置 垂直位置 模糊程度 拓展大小 颜色 是否内边框阴影box-shadow: 20px 20px 5px 20px #f00 inset;

ログイン後にコピー

过渡属性transition
transition: 过渡属性过渡时间运动曲线延时时间；

属性值	作用
transition	简写属性，用于在一个属性中设置其他4个过渡属性
transition-property	规定应用过渡的css属性的名称
transition-duration	定义过渡效果花费的时间，默认是0
transition-timing-function	规定过渡效果的时间曲线，默认是ease
transition-delay	规定过渡效果何时开始。默认是0

transition-property过渡的属性
none表示没有属性过渡
all表示所有变化的属性都过渡
属性名：使用具体的属性名，多个属性名之间逗号分隔
transition-timing-function 时间曲线
CSS3の新機能

.box{
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    transition: all 2s linear 0s;     过渡属性的使用（动画效果）  }
  .box:hover{
    width: 500px;
  }

ログイン後にコピー

2D转换-transform
移动translate()
作用：对元素进行移动、缩放、转动、拉长、拉伸，配合过渡效果实现动画效果
CSS3の新機能

transform: translate(10px,10px);

ログイン後にコピー

缩放scale()
transform的属性值为scale()可以实现缩放效果
scale为1以上为放大效果，为0到1之间缩放
CSS3の新機能
旋转rotate()
实现元素旋转
元素旋转后，坐标轴也会发生改变
正数表示顺时针旋转，负数表示逆时针旋转

transform: rotate(30deg);

ログイン後にコピー

倾斜skew()
设置skew()，实现元素倾斜
书写语法：transform:skew(数字deg,数字deg);
transform-origin 属性
设置调整元素的水平和垂直方向原点位置，调整元素基准点
x:定义X轴的原点，可能的值：left、center、right、像素值、百分比
y:定义y轴的原点，可能的值：left、center、right、像素值、百分比

transform-origin: left top;   以左上角为基准点

ログイン後にコピー

3D转换
透视perspective
透视可以将一个2D平面在转换过程中呈现3D效果
作用：设置在Z轴的视线焦点的观察位置，从而实现3D效果
属性值：像素值，数值越大，观察点距离z轴原点越远
3D旋转
CSS3の新機能
3D位移
加粗样式属性值为像素或者百分比

transform-style属性
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
属性值：flat:所有子元素在2D平面呈现，preserve-3d:保留3D空间

transform-style: preserve-3d;

ログイン後にコピー

浏览器兼容
internet Explorer10、Firefox以及Opera支持transform属性
Chrome 和 Safari需要前缀-webkit-
internet Explorer9 需要前缀-ms-

动画
css3中提供了自己的动画制作方法
css3动画制作分为两步，创建动画、制作动画

animation属性
需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果
animation属性用于对动画进行捆绑
语法：animation:动画名称过渡时间速度曲线动画次数延时时间

小球运动动画代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 200px auto;
      background-color: skyblue;
      /* 添加绑定动画 */
      animation: move1 2s linear infinite;
    }
    /* 开头和结尾定义动画效果 */
    @keyframes move{
      from{
        transform: translateY(0);
      }
      to{
        transform: translateY(150px);
      }
    }
    @keyframes move1{
      0%{
        transform: translateY(0);
      }
      25%{
        transform: translateY(200px);
      }
      50%{
        transform: translateY(0);
      }
      75%{
        transform: translateY(-200px);
      }
      100%{
        transform: translateY(0);
      }
    }
  </style>
</head>
<body>
  <p class="box">
  </p>
</body>
</html>

ログイン後にコピー

以上がCSS3の新機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。