CSSボックスエフェクトの詳しい解説-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSボックスエフェクトの詳しい解説

高洛峰

Mar 27, 2017 am 10:33 AM

css

CSSボックスエフェクト:

CSSボックスエフェクトの詳しい解説

<!DOCTYPE html>
<html>
<head>
<!--声明当前页面的编码格式 UTF-8（国际编码）gbk(中文简体)-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!--声明当前页面的三要素-->
<title>CSS盒子效果</title>
<meta name="Keywords" content="关键字">
<meta name="Description" content="描述">
<style type="text/css">
*{margin:0; padding:0;}/*通配符*/
body{ color:#fff;}
.box-common {
  padding: 5px 10px;
  margin: 10px;
  font-size: 21px;
  line-height: 1.3em;
  border: 2px dashed #fff;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.red{
  background: #ff0030;
  color: #fff;
  -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  text-shadow: -1px -1px #aa3030;
}
.blue{
  background: blue;
  color: #fff;
  -moz-box-shadow: 0 0 0 4px blue, 2px 1px 4px 4px rgba(10,10,0,.5);
  -webkit-box-shadow: 0 0 0 4px blue, 2px 1px 4px 4px rgba(10,10,0,.5);
  box-shadow: 0 0 0 4px blue, 2px 1px 6px 4px rgba(10,10,0,.5);
  text-shadow: -1px -1px #aa3030;
}
.green{
 background: green;
 color: #fff;
  -moz-box-shadow: 0 0 0 4px green, 2px 1px 4px 4px rgba(10,10,0,.5);
  -webkit-box-shadow: 0 0 0 4px green, 2px 1px 4px 4px rgba(10,10,0,.5);
  box-shadow: 0 0 0 4px green, 2px 1px 6px 4px rgba(10,10,0,.5);
  text-shadow: -1px -1px #aa3030;
}
</style>
</head>
<body>
<p class="box-common red">效果演示</p>
<p class="box-common blue">效果演示</p>
<p class="box-common green">效果演示</p>
</body>
</html>

以上がCSSボックスエフェクトの詳しい解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

毎週のプラットフォームニュース：Galaxy Store、Tappable Stories、CSS SubgridのWebアプリApr 14, 2025 am 11:20 AM

今週のラウンドアップ：Firefoxは錠前屋のような力を獲得し、Samsung＆＃039; s Galaxy StoreがプログレッシブWebアプリをサポートし始め、CSS SubgridはFirefoxで出荷しています

毎週のプラットフォームニュース：インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限Apr 14, 2025 am 11:15 AM

今週のラウンドアップ：Internet ExplorerがEdgeに進み、Google Search Consoleが新しい速度レポートを宣伝し、FirefoxがFacebookの通知を提供します

CSSカスタムプロパティを使用したスコープのパワー（および楽しい）Apr 14, 2025 am 11:11 AM

おそらく、CSS変数に少なくとも少し精通しているでしょう。そうでない場合は、ここに2秒の概要があります：それらは本当にカスタムプロパティと呼ばれます、あなたは設定します

私たちはプログラマーですApr 14, 2025 am 11:04 AM

建物のウェブサイトはプログラミングです。 HTMLとCSSの作成はプログラミングです。私はプログラマーです。ここでCSS-Tricksを読んでいる場合、あなたは＆＃039;

サイトから未使用のCSSをどのように削除しますか？Apr 14, 2025 am 10:59 AM

ここに＆＃039;私が前もって知るのが好きなこと：これは難しい問題です。あなたがここに上陸した場合、あなたはあなたが伝えることができるツールを指し示すことを望んでいるので、あなたが＆＃039;

ピクチャーインピクチャーWeb APIの紹介Apr 14, 2025 am 10:57 AM

Picture-in-Pictureは、2016年にMacos SierraをリリースしたSafariブラウザでWebに初めて登場しました。ユーザーがポップできるようになりました。

ギャツビーを使用してぼやけた効果のために画像を整理して準備する方法Apr 14, 2025 am 10:56 AM

Gatsbyは、画像の処理と処理の素晴らしい仕事をしています。たとえば、手動で画像の最適化で時間を節約するのに役立ちます

ああ、パディングの割合は親要素の幅に基づいていますApr 14, 2025 am 10:55 AM

私は今日、私の頭の中で完全に間違っていたことをパーセンテージベース（％）のパディングについて学びました！パディングの割合はに基づいているといつも思っていました

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。