CSS3 にいくつかの新しいテクノロジーを導入-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS3 にいくつかの新しいテクノロジーを導入

Y2J

May 11, 2018 pm 05:10 PM

css3divコード要素私たち新技術影

Web ページ制作に関する Webjx 記事の紹介: この記事では、Web Page Teaching Network が CSS の 5 つの興味深い新しいテクノロジ (角丸、個々の角丸、不透明度、シャドウ、要素のサイズ変更) を紹介します。 CSS はよく知られ、広く使用されている Web サイトスタイル言語です。そのバージョン 3 (CSS3) プランでは、時間を節約できるいくつかの新機能が追加されました
。スクリプトハウスは、この記事で CSS の 5 つの興味深い新しいテクノロジ (角丸、個々の角丸、不透明度、影、サイズ変更要素) を紹介します。
CSS はよく知られ、広く使用されている Web サイトスタイル言語です。そのバージョン 3 (CSS3) プランには、時間を節約できるいくつかの新機能が追加されています。これらの効果はブラウザの最新バージョンでのみサポートされていますが、それでも理解することが必要であり、興味深いものです。 Script House は、この記事で CSS の 5 つの興味深い新しいテクノロジ (角丸、個々の角丸、不透明度、シャドウ、要素のサイズ変更) を紹介します。
関連記事：CSS3を使うための5つのヒントを紹介 1: 基本マークアップ
CSS3 にいくつかの新しいテクノロジーを導入
このチュートリアルを始める前に、チュートリアル全体で使用する基本マークアップを作成しましょう。
xHTML には次の p 要素が必要です。 #round、CSS3 コードを使用して角を丸くします。 #indie、個々の丸い角を使用します。 #opacity は、不透明度を実装する新しい CSS3 方法を示します。 #shadow では、Photoshop を使用せずに CSS3 を使用してシャドウ効果を実現する方法を示します。 #resize は、CSS を使用してサイズ変更効果を実現する方法を示します。
要約すると、xHTML は次のようになります:

<!DOCTYPE html PUBLIC “-//
W3C
//
DTD
 XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html 
xml
ns=”http://www.w3.org/1999/xhtml”>
<
head
>
<meta http-equiv=”Content-Type” content=”text/html; char
set
=utf-8″ />
<title>An Introduction to CSS3; A Nettuts Tutorial</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<p id=”wrapper”>
<p id=”round”> </p>
<p id=”indie”> </p>
<p id=”opacity”> </p>
<p id=”shadow”> </p>
<p id=”resize”>
<img class="alignnone size-full wp-image-2157 lazy"  src="/static/imghwm/default1.png"  data-src="https://img.php.cn/upload/article/000/001/505/8634c49225d2d852dacdbbadecbfda3a-1.png?x-oss-process=image/resize,p_40"  src=”image.jpg” alt=”resizable image” width=”200″ height=”200″>
</p>
</p>
</body>
</html>

基本的な CSS ファイルを作成しましょう:

body {
background-color: #fff;
}
#wrapper {
width: 100%;
height: 100%;
}
p {
width: 300px;
height: 300px;
margin: 10px;
float: left;
}

上でわかるように、各 p 要素に 300px の幅と高さを与え、それらを方向付けします。左側の float 、ページ全体の p は、後の作業でスタイルを追加するために残されます。この情報が表示されるということは、記事が Script House www.jb51.net からのものであることを意味します。記事が不完全な場合は、Script House jb51.net にアクセスして参照してください。 2:角丸
CSS3 にいくつかの新しいテクノロジーを導入
角丸を作る方法は現在色々ありますが、どれも面倒です。最も一般的に使用される方法: まず、角の丸い画像を作成する必要があります。次に、多くの html 要素を作成し、角の丸い画像を表示するために背景画像を使用する必要があります。あなたも私も具体的なプロセスをよく知っています。
この問題は、CSS3 で「border-radius」と呼ばれるプロパティを使用することで簡単に解決できます。まず黒い p 要素を作成し、それに黒い境界線を設定します。境界線は、「border-radius」属性の効果を実現するための前提条件です。
次のように:

#round {
background-color: #000;
border: 1px solid #000;
}

これで p 要素が作成されました。見た目は予想通り、高さ 300 ピクセル、角があり、黒色です。次に、角丸を実装するコードを追加しましょう。これは非常に簡単で、必要なコードは 2 行だけです。

#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

ここでは、Firefox ブラウザーの場合は -moz-、Safari/Chrome ブラウザーの場合は -webkit- という 2 つの同様のコード行を追加しました。
注: これまでのところ、IE ブラウザは border-radius 属性をサポートしていないため、IE に角丸効果を持たせたい場合は、角丸を個別に追加する必要があります。
border-radius この属性は、Photoshop と同様に、文字通り境界線の半径として翻訳され、その値が大きいほど、角の丸みが大きくなります。

【関連おすすめ】

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

2. 22 個の H5 および CSS3 ヘルプツールを共有します

3. CSS3 とは何ですか?

CSS3のセレクターの例の詳細な説明

20の一般的なCSS/CSS3プロパティを統合します

以上がCSS3 にいくつかの新しいテクノロジーを導入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

Draggin＆＃039;ドロップピン＆＃039;反応でApr 17, 2025 am 11:52 AM

React Ecosystemは、すべてがドラッグアンドドロップの相互作用に焦点を合わせている多くのライブラリを提供します。 React-Dnd、React-Beautiful-Dnd、

高速ソフトウェアApr 17, 2025 am 11:49 AM

最近、高速ソフトウェアについて素晴らしい相互接続されたことがいくつかありました。

バックグラウンドクリップ付きのネストされたグラデーションApr 17, 2025 am 11:47 AM

バックグラウンドクリップをすべて頻繁に使用すると言うことができます。私は、日々のCSS作業ではほとんど使用されていない＆＃039; dを賭けています。しかし、私はステファン・ジュディスの投稿でそれを思い出しました、

ReackAnimationFrameを使用してReact Hooksを使用しますApr 17, 2025 am 11:46 AM

RequestAnimationFrameでアニメーション化するのは簡単なはずですが、Reactのドキュメントを徹底的に読んでいない場合は、おそらくいくつかのことに遭遇するでしょう

ページの上部にスクロールする必要がありますか？Apr 17, 2025 am 11:45 AM

おそらく、それをユーザーに提供する最も簡単な方法は、要素上のIDをターゲットにするリンクです。だから...

Best（GraphQL）APIはあなたが書くものですApr 17, 2025 am 11:36 AM

聞いてください、私はGraphQLの専門家ではありませんが、私はそれで働くことを楽しんでいます。フロントエンド開発者としてデータを公開する方法はかなりクールです。メニューのようなものです

毎週のプラットフォームニュース：テキスト間隔のブックマークレット、トップレベルの待望、新しいアンプロードインジケーターApr 17, 2025 am 11:26 AM

今週のラウンドアップ、タイポグラフィを検査するための便利なブックマークレットである。

ボーダー半径を保存しながら箱を拡張するためのさまざまな方法Apr 17, 2025 am 11:19 AM

私は最近、Codepenの興味深い変化に気づきました。ホームページにペンをホバリングすると、丸い角が背面に拡大する長方形があります。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。