よく使用される最新の CSS3 プロパティを共有する-CSSチュートリアル-php.cn

よく使用される最新の CSS3 プロパティを共有する

Y2J

リリース： 2017-05-23 10:52:12

オリジナル

2107 人が閲覧しました

ここでは、CSS3 の 4 つの新しいプロパティを紹介します。サンプルが添付されているので、必要な方は注意深く学習してください。プロジェクトを行うときによく使用します

css3 はリリースされたばかりですが、多くの一般的なブラウザーではほとんどの css3 属性がサポートされていませんが、私は個人的には、css3 (および html5) を理解し、使用できるように最善を尽くしるべきだと感じています。これはトレンドであり、確立されたスタンダードだと思います。私は特にフロントエンドの仕事をしているわけではありません。時々自分でこれらのことを書く必要があり、時々それらを研究するのが好きなだけです。上記はすべて私の個人的な意見です。

1. 以前、ページに角の丸い境界線を作成したいと思っていましたが、多くのCSSコードを記述する必要があるようでした（もっと良い方法を知らなかったかもしれません）。角丸を作成する簡単に、角度を設定して円を作成することもできます

border-radius:

css code:

コードは次のとおりです:

#test
{
text-align:center;
padding:10px 40px;
background:gray;
width:350px;
border-radius:10px;
-moz-border-radius:10px; /* 为了让老的 Firefox版本支持 */
}

ログイン後にコピー

html code:

コードは次のとおりです:

<body>
<p>border-radius 做圆角的例子。</p>
</body>

ログイン後にコピー

2. CSS3 の境界線の影。以前は、images を使用して背景の効果を実現しました。また、css3 の box-shadow 属性を使用して効果を実現することもできます。

box-shadow:

css コード:

コードは次のとおりです:

#test1
{
box-shadow: 10px 10px 5px #A5A5A5;
width:300px;
height:100px;
}

ログイン後にコピー

html コード:

コードは次のとおりです:

3. CSS3 は背景画像をサポートします

CSS3 の複数の背景画像

コードは次のとおりです。

.box
{
width:464px;
height:300px;
background:url(test1.jpg) 0 0 no-repeat,url(test2.jpg) 100% 0 no-repeat;
}
</style>
</head>
<body>
<p></p>
</body>

ログイン後にコピー

4.
text-overflow

属性は、問題が発生したときに、テキストが含まれる要素からオーバーフローするタイミングを指定します。

この属性は、コンテナ内のテキストがオーバーフローした場合に省略記号を付ける機能をサポートします。

コードは次のとおりです:

<em>.test3 {<br/>text-overflow:ellipsis;<br/>overflow:hidden;<br/>white-space<br/>:nowrap;<br/>border: 1px solid black;<br/>width: 400px;<br/>padding: 20px;<br/>cursor: pointer;<br/>}<br/>#test3<br/>:hover<br/> {<br/>white-space: normal;<br/>color: rgba(0,0,0,1);<br/>background: #e3e3e3;<br/>border: 1px solid #666;<br/>}<br/></style><br/></head><br/><body><br/><p>当这里显示的内容溢出是会有省略号，鼠标移到文本上面会显示所有内容</p><br/></body><br/></em>

ログイン後にコピー

5、トランジションエフェクト

、CSS3を介して、

アニメーションまたは
JavaScriptを使用できますFlashを使わずにの場合of あるスタイルから別のスタイルに変換するときに要素に効果を追加します。テクスチャで効果を表現するのは難しいので、次のコードを自分で実行してみたい場合は、次のとおりです:

<style>
p
{
width:100px;
height:100px;
background:blue;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-trans
for
m 2s; /* 可以支持Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* 可以支持Safari and 
Chr
ome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* 可以支持Opera */
}
p:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* 可以支持Firefox 4 */
-webkit-transform:rotate(180deg); /* 可以支持Safari and Chrome */
-o-transform:rotate(180deg); /* 可以支持Opera */
}
</style>
</head>
<body>
<p>把鼠标放上该区域，来查看过渡效果。</p>
</body>

ログイン後にコピー

[関連する推奨事項]

CSS3 の無料ビデオチュートリアル

チャットボックスの小さな鋭い角とバブル効果を使用して作成

3. モバイル端末上で高性能のCSS3アニメーションを実装する

4.インとフェードアウトの効果

5. CSS3を使用して8種類の読み込みアニメーションを作成します

以上がよく使用される最新の CSS3 プロパティを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。