CSS3の枠線と背景とテキスト効果

今回はCSS3のボーダー、背景、テキストエフェクトについてご紹介します。CSS3のボーダー、背景、テキストエフェクトを使用する際の注意点について、実際の事例を見てみましょう。

CSS3 ボーダー、背景、テキスト効果で遊んでみましょう

1. ボーダー

ボックスシャドウ

box-shadow: h-shadow v-shadow blur spread color inset(ontset);
//h-shadow：水平阴影 v-shadow：垂直阴影 blur：模糊距离 spread：阴影的尺寸 color：阴影的颜色 inset（outset）：内部阴影/外部阴影 
box-shadow: 5px 0 5px 0 #000 outset;//效果图如下

ボーダー半径の丸い角

rrreええ

別の境界線を設定することでコーナーは様々なボーダーボックスを実現できます

border-image

border-radius: 1-4 length|% / 1-4 length|%;
//第一个参数：水平半径 第二个参数:垂直半径
border-radius: 50%/20%;//效果图如下

2. Background

background-size 背景画像のサイズを指定します

border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat
//边框图片url边框内偏移 边框宽度 边框图像区域超出边框的量 边框平铺（repeated）、铺满（rounded）、拉伸（stretched）

background-clip 背景を指定します「描画」領域

background-size: length|percentage|cover|contain;
//length：设置背景图片宽度和高度 percentage：根据父元素百分比设置背景图片宽度和高度 cover：背景图像扩展至足够大以使背景图像完全覆盖背景区域 contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

background-originは、背景画像の「配置」領域を指定します

background-clip: border-box|padding-box|content-box;

追伸：background-originとbackground-clipの違いに注意してください。1つは配置領域であり、もう1つは背景画像の「配置」領域です。もう1つは描画エリアです

3、テキストエフェクト

text-shadowテキストシャドウeffect

background-origin: padding-box|border-box|content-box;

word-wrapを使用すると、分割できない長い単語を分割して次の行に折り返すことができます

<span style="color: #800000">text-shadow: h-shadow v-shadow blur color;<br>//h-shadow:水平阴影 v-shadow:垂直阴影 blur:模糊距离 color:阴影颜色<br>text-shadow: 5px 5px 3px #000;//效果图如下</span>

word-break 中国語、日本語、韓国語以外の言語が必要です この改行ルール

<span style="color: #800000">word-wrap: normal|break-word;<br>//normal:只在允许的断字点换行 break-word:在长单词或url地址内部换行</span>

この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ！

推奨読書:

JS で順序なしリスト属性を操作する方法

Safari ブラウザーの選択ドロップダウン リストのテキストが長すぎて折り返されない

以上がCSS3の枠線と背景とテキスト効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。