CSS3で要素の枠線や背景、サイズを設定する方法を解説します。

Border

ボーダーに関するプロパティは以下の通りです。

border-width

は、境界線の幅を設定するために使用されます。オプションは次のとおりです:
1) : CSS 測定単位 (em、px、など) で表現される境界線の幅を設定します。 cm) 長さの値
2) <パーセンテージ>: 境界線描画領域の幅のパーセントとして境界線の幅の値を設定します
3) 境界線の幅をデフォルトに設定します。これら 3 つの値の具体的な意味はブラウザによって定義されます。境界線の幅のデフォルト値は中です。

border-style

は、境界線の描画に使用されるスタイルを設定するために使用されます。これは、次のいずれかの値になります。
1) なし: 境界線なし、デフォルト値;
2) 破線: 点線の境界線;
4) 溝: 溝付き境界線;要素コンテンツにインライン効果を持たせるボーダー
6) アウトセット: 要素コンテンツに凸効果を持たせるボーダー
8) ソリッド: 実線ボーダー。 。
border-color
境界線の色を設定します。
特定の側の境界線スタイルを設定する

top-edge

border-top-width

border-top-style

border-top-color
bottom-border
border-bottom -width
border-bottom-style
border-bottom-color
left
border-left-width
border-left-style
border-left-color
right
border -right- width
border-right-style
border-right-color
略称

border:

border-top : <幅><スタイル>

ボーダー下: <カラー>

ボーダー>
border-right:
border-top-left-radiusborder-top-right-radiusborder-bottom-left-radius
border-bottom-right-radius
丸い角を設定します。境界ボックスの幅と高さに関連する長さの値またはパーセント値のペア。 border-radius

4つの角を一度に設定します。 / 文字で区切られた 1 組または 4 つの長さ値またはパーセンテージ値。

p {
	border: medium solid black;
}
#first {
	border-radius: 20px / 15px;
}
#second {
	border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%
}

背景

背景の色と画像
次のように、要素の背景の色、画像、サイズ、タイリング方法を設定できます:

p {
	border: medium solid black;
	background-color: lightgray;
	background-image: url(banana.png);
	background-size: 40px 40px;
	background-repeat: repeat-x;
}

background-repeat は、次の属性値をサポートします。

1)repeat -x:画像を水平方向に並べて表示します。画像は切り詰められる可能性があります。

2)repeat-y:画像を垂直方向に並べて表示します。画像は切り詰められる場合があります。

3)repeat:画像を並べて表示します。

4) スペース: 画像を水平または垂直にタイル表示しますが、画像が切り詰められないように画像間の間隔を均等に設定します。

5) 丸めます。 : 画像を水平方向または垂直方向に並べて表示しますが、画像が切り詰められないように画像のサイズを変更します
6) no-repeat: 画像の並べ替えを無効にします。
background-size は次の属性値をサポートします:
1) contains: 幅と高さの大きい方がコンテナーと水平方向または垂直方向に一致するように画像を比例的に拡大縮小し、背景画像は常にコンテナーに含まれます。 ;
2) cover: 画像が少なくともコンテナを覆い、コンテナを超える可能性があるように画像を比例的に拡大縮小します。
3) auto: デフォルト値、画像は独自のサイズで完全に表示されます。

设置背景图像位置

background-position属性设置背景图像的位置。

p {
	border: 10px double black;
	background-color: lightgray;
	background-image: url(banana.png);
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 30px 10px;
}

background-position属性的值包括：
1）top：将背景图像定位到盒子顶部边界；
2）left：将背景图像定位到盒子左边界；
3）right：将背景图像定位到盒子右边界；
4）bottom：将背景图像定位到盒子底部边界；
5）center：将背景图像定位到中间位置。

元素背景的附着方式

当元素具有滚动条时，使用background-attachment属性可以控制背景的附着方式。支持的属性值包括：
1）fixed：背景固定到视窗上，即内容滚动时背景不动；
2）local：背景附着到内容上，即背景随内容一起滚动；
3）scroll：背景固定到元素上，不会随内容一起滚动。

背景图像的开始位置和裁剪样式

background-origin属性指定背景颜色和背景图像应用的位置。支持的属性值包括：
1）border-box：在边框盒子内部绘制背景颜色和背景图像；
2）padding-box：在内边距盒子内部绘制背景颜色和背景图像；
3）content-box：在内容盒子内部绘制背景颜色和背景图像。

background-clip属性决定了背景的哪一部分是可见的，裁剪盒子之外的部分一律被丢弃，不会显示。支持的属性值同上。

简写方式

可以使用background简写属性在一条声明中设置所有的背景值：
background:

阴影

使用box-shadow属性可以为元素的盒子添加阴影效果。支持的属性值如下：
1）hoffset：阴影的水平偏移量，是一个长度值，正值代表阴影向右偏移，负值代表阴影向左偏移；
2）voffset：阴影的垂直偏移量，是一个长度值，正值代表阴影位于元素盒子下方，负值代表阴影位于元素盒子上方；
3）blur：（可选）模糊值，是一个长度值，值越大盒子的边界越模糊。默认值0，边界清晰；
4）spread：（可选）阴影的延伸半径，是一个长度值，正值代表阴影向盒子各个方向延伸扩大，负值代表阴影沿相反方向缩小；
5）color：（可选）设置阴影的颜色，如果省略，浏览器会自行选择一个颜色；
6）inset：（可选）将外部阴影设置为内部阴影（内嵌到盒子中）。
可以一次设置多个阴影，使用逗号分隔：

p {
	border: 10px double black;
	box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;
}

轮廓

轮廓是可选的，轮廓的用处是在短时间内抓住用户对某个元素的注意力，轮廓绘制在盒子边框的外面，边框和轮廓的最大的区别是：轮廓不属于页面，因此应用轮廓不需要调整页面布局。轮廓的属性包括：
1）outline-color：设置外围轮廓的颜色；
2）outline-offset：长度值，设置轮廓距离元素边框边缘的偏移量；
3）outline-style：设置轮廓样式，同border-style的值；
4）outline-width：设置轮廓的宽度，包括：thin、medium、thick和长度值；
5）ouline：在一条生命中设置轮廓的所有属性（<颜色> <样式> <宽度>）。

元素的边距

元素的内边距

元素的内边距是元素内容和边框之间的空白，内边距有如下属性，值都为长度值或者百分数：
1）padding-top：为顶边设置内边距；
2）padding-right：为右边设置内边距；
3）padding-bottom：为底边设置内边距；
4）padding-left：为左边设置内边距；
5）padding：简写属性，同时设置所有边的内边距。

p {
	border: 10px solid black;
	background: lightgray;
	border-radius: 1em 4em 1em 4em;
	padding: 5px 25px 5px 40px;
}

元素的外边距

元素的外边距是元素边框和页面上围绕在它周围的所有东西之间的空白区域，外边距有如下属性，值都为长度值或者百分数：
1）margin-top：为顶边设置外边距；
2）margin-right：为右边设置外边距；
3）margin-bottom：为底边设置外边距；
4）margin-left：为左边设置外边距；
5）margin：简写属性，在一条声明中设置所有边的外边距。

img {
	border: 4px solid black;
	background: lightgray;
	padding: 4px;
	margin: 4px 20px;
}

元素的大小

CSS提供了控制元素尺寸的属性，这些属性可以使用的值为auto、长度值或者百分数。auto表示让浏览器设置元素的宽度和高度。

设定区域

box-sizing属性指定尺寸样式应用到元素盒子的具体区域，取值包括：
1）content-box：尺寸设置仅应用到内容区域；
2）pading-box：尺寸设置应用到pading区域；
3）border-box：尺寸设置应用到border区域；
4）margin-box：尺寸设置应用到margin区域。

最小和最大尺寸

min-width和max_width属性为浏览器调整尺寸设置一定的限制。

img {
	background: lightgray;
	border: 4px solid black;
	margin: 2px;
	box-sizing: border-box;
	min-width: 100px;
	width: 50%;
	max_width: 200px;
}

内容溢出

如果元素的尺寸过大，无法完全显示在元素的内容盒中，目前有3个属性用于控制内部溢出部分的处理方式：
1）overflow-x：设置水平方向的溢出方式；
2）overflow-y：设置垂直方向的溢出方式；
3）overflow：同时设置水平方向和垂直方向的溢出方式。
3个属性支持的属性值如下：
1）auto：浏览器自行处理溢出内容；
2）hidden：多余的部分直接剪掉，只显示内容盒里面的内容；
3）no-content：如果内容无法全部显示，就直接移除，大部分浏览器都不支持；
4）no-display：如果内容无法全部显示，就隐藏所有内容，大部分浏览器都不支持；
5）scroll：为内容添加滚动条，即使内容没有溢出也能看到滚动条；
6）visible：默认值，不管是否溢出内容盒，都显示元素效果。

p {
	width: 200px;
	height: 100px;
	border: medium double black;
}
#first {overflow: hidden;}
#second {overflow: scroll;}

元素的可见性

使用visibility属性可以控制元素的可见性，支持的属性值如下：
1）collapse：元素不可见，且在页面布局中不占据空间；
2）hidden：元素不可见，但在页面布局中占据空间；
3）visible：默认值，可见。

元素的盒类型

display属性提供了一种改变元素盒类型的方式，这会改变元素在页面上的布局方式。该属性的常用值如下，不包括弹性盒子、表格和ruby注释相关的属性：
1）inline：盒子显示为文本行中的字；
2）block：盒子显示为段落；
3）inline-block：盒子显示为文本行；
4）list-item：盒子显示为列表项；
5）run-in：盒子类型取决于周围的元素；
6）none：元素不可见，且在页面布局中不占空间。

浮动

float属性设置元素的浮动样式，可选择包括：
1）left：移动元素，使其左边界挨着包含块的左边界，或者另一个浮动元素的右边界；
2）right：移动元素，使其右边界挨着包含块的右边界，或者另一个浮动元素的左边界；
3）none：元素位置固定。

p.toggle{
	float: left;
	border: medium double black;
	width: 40%;
	margin: 2px;
	padding: 2px;
}

以上がCSS3で要素の枠線や背景、サイズを設定する方法を解説します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：

css css3

ソース：php.cn

前の記事：input type=number の入力ボックスの上矢印と下矢印を削除する方法 次の記事：CSS3 を使用して Web ページでよく見られる小さな矢印を作成する方法

このウェブサイトの声明

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

著者別の最新記事

• phpstudy2018 アップグレード後、サイトと phpmyadmin は 404 ソリューションを開きます
  2018-06-30 16:21:47
• JS が PHP を呼び出すメソッドと PHP が JS を呼び出すメソッドの例
  2023-03-15 12:22:02
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル
  1970-01-01 08:00:00
• PHP_PHPチュートリアルでカレントディレクトリと相対ディレクトリを取得する方法
  2023-02-28 17:52:02
• RabbitMQ と PHP
  2023-02-28 15:12:01
• 中国省市区数据mysql脚本_MySQL
  1970-01-01 08:00:00
• mysql数据库数据变化实时监控
  2019-02-22 15:16:56
• apache2.4+php5.6はphp5apache2_4.dllをロードできません
  2023-02-28 16:28:01
• Phpstorm+Xdebug ブレークポイントを使用して PHP をデバッグする方法
  2023-03-25 19:14:01
• Pure js でカプセル化された ajax 関数と使用例
  1970-01-01 08:00:00

最新の問題

ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...

から 2024-04-01 20:42:38

0

1

259

関連トピック

詳細>

• css
• css3チュートリアル
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法