CSS3の新機能

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

#この記事の動作環境: 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 时间曲线

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

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

transform: translate(10px,10px);

缩放scale()
transform的属性值为scale()可以实现缩放效果
scale为1以上为放大效果，为0到1之间缩放

旋转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旋转

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.最高のグラフィック設定

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

アサシンのクリードシャドウズ：シーシェルリドルソリューション

2週間前 By DDD

R.E.P.O.誰も聞こえない場合はオーディオを修正する方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.チャットコマンドとそれらの使用方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7530

15

CakePHP チュートリアル

1378

52

Steamのアカウント名の形式は何ですか

82

11

Win11 Activation Key Permanent

54

19

NYTの接続はヒントと回答です

21

76

もっと見る

Related knowledge

純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例) Jun 28, 2022 pm 01:39 PM

純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。

CSSを上手に使って色々な変わった形のボタンを実現（コード付き） Jul 19, 2022 am 11:28 AM

この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。

スペースを取らずにCSS内の要素を非表示にする方法 Jun 01, 2022 pm 07:15 PM

2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。

CSS3でレースボーダーを実装する方法 Sep 16, 2022 pm 07:11 PM

CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。

テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。 Jun 10, 2022 pm 01:00 PM

テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。

CSS3でマウスクリックで画像を拡大する方法 Apr 25, 2022 pm 04:52 PM

実装方法: 1. ":active" セレクターを使用して、画像上のマウス クリックの状態を選択します; 2. 変換属性とscale() 関数を使用して、画像の拡大効果を実現します。構文 "img:active {transform : スケール(x 軸倍率、y 軸倍率);}"。

CSS3でアニメーションの回転速度を設定する方法 Apr 28, 2022 pm 04:32 PM

CSS3 では、「animation-timing-function」属性を使用してアニメーションの回転速度を設定できます。この属性は、アニメーションがサイクルを完了する方法を指定し、アニメーションの速度曲線を設定するために使用されます。構文は「element {アニメーションタイミング関数: 速度属性値;}"。

css3のアニメーション効果に変形はありますか？ Apr 28, 2022 pm 02:20 PM

css3 のアニメーション効果には変形があり、「animation: アニメーション属性 @keyframes ..{..{transform: 変換属性}}」を使用して変形アニメーション効果を実現できます。アニメーション属性はアニメーション スタイルを設定するために使用され、変形スタイルを設定するには、transform 属性を使用します。

See all articles

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて 免責事項 Sitemap

© php.cn All rights reserved