CSS3: 要素の境界線、背景、サイズ_html/css_WEB-ITnose

ボーダー

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

border-width

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

border-style

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

border-color

境界線の色を設定します。

特定の辺の境界線スタイルを設定する

上端

border-top-width
border-top-style

border-top-color

下端
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


略語

ボーダー:

ボーダー
-左:

境界線>

境界線上部-半径
top-right-radius
border-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:horizo​​ntal 画像を水平方向と垂直方向に並べて表示します。画像は切り詰められる可能性があります 2)repeat-y:画像を垂直方向に並べて表示すると、画像が切り詰められる可能性があります

3)repeat:画像を水平方向と垂直方向に同時に並べると、画像が切り詰められる可能性があります。
4) スペース: 画像を水平方向または垂直方向に並べて表示しますが、画像が切り詰められないように画像間に均一の間隔を設定します。

5) ラウンド: 画像を水平または垂直にタイル表示しますが、画像が切り詰められないように画像サイズを調整します。

6) no-repeat: タイル状の画像を無効にします。

背景サイズは次の属性値をサポートします:
1) 含む: 幅と高さの大きい方がコンテナーと水平方向または垂直方向に一致するように画像を比例的に拡大縮小し、背景画像は常にコンテナーに含まれます。 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) 右: 背景画像をボックスの右端に配置します。 4) 下: 背景画像をボックスの下端に配置します。 5) 中央: 背景画像を中央の位置に配置します。

元素背景的附着方式

当元素具有滚动条时，使用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;}