CSS颜色与边框说明

最新推荐文章于 2023-08-11 09:44:42 发布

Guanyu Liu

最新推荐文章于 2023-08-11 09:44:42 发布

阅读量261

点赞数

分类专栏： CSS 文章标签： css

原文链接：https://www.w3school.com.cn/css/index.asp

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS 颜色

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

CSS 颜色名

在 CSS 中，可以使用颜色名称来指定颜色：

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

亲自试一试

CSS/HTML 支持 140 种标准颜色名。

CSS 背景色

您可以为 HTML 元素设置背景色：

Welcome to China

China is a great country!

实例

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

亲自试一试

CSS 文本颜色

您可以设置文本的颜色：

China

China is a great country!

China, officially the People's Republic of China, is a country in East Asia.

实例

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

亲自试一试

CSS 边框颜色

您可以设置边框的颜色：

Hello World

实例

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
<h1 style="border:4px solid Orange;">Hello My World</h1>

亲自试一试

CSS 颜色值

在 CSS 中，还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色：

与颜色名 "Tomato" 等效：

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

与颜色名 "Tomato" 等效，但是透明度为 50%：

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

亲自试一试

了解有关颜色值的更多信息

在下一章中，您将学习有关 RGB、HEX 和 HSL 的更多知识。

CSS 背景

通过 CSS，颜色通常由以下方式指定：

有效的颜色名称 - 比如 "red"
十六进制值 - 比如 "#ff0000"
RGB 值 - 比如 "rgb(255,0,0)"

CSS 背景属性用于定义元素的背景效果。

在这些章节中，您将学习如下 CSS 背景属性：

background-color
background-image
background-repeat
background-attachment
background-position

其他元素

您可以为任何 HTML 元素设置背景颜色：

实例

在这里，<h1>、<p> 和 <div> 元素将拥有不同的背景色：

h1 {
  background-color: green;
}

div {
  background-color: lightblue;
}

p {
  background-color: yellow;
}

div {
  background: rgba(0, 128, 0, 0.3) /* 30% 不透明度的绿色背景 */
}

CSS 背景重复

CSS background-repeat

默认情况下，background-image 属性在水平和垂直方向上都重复图像。

某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪，如下所示：

实例

body {
  background-image: url("gradient_bg.png");
}

亲自试一试

如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;)，则背景看起来会更好：

实例

body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

亲自试一试

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;

CSS background-repeat: no-repeat

background-repeat 属性还可指定只显示一次背景图像：

实例

背景图像仅显示一次：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
}

亲自试一试

在上例中，背景图像与文本放置在同一位置。我们想要更改图像的位置，以免图像过多干扰文本。

CSS background-position

background-position 属性用于指定背景图像的位置。

实例

把背景图片放在右上角：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

CSS background-attachment

background-attachment 属性指定背景图像是应该滚动还是固定的（不会随页面的其余部分一起滚动）：

实例

指定应该固定背景图像：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

实例

指定背景图像应随页面的其余部分一起滚动：

body {
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}

CSS 背景简写

CSS background - 简写属性

如需缩短代码，也可以在一个属性中指定所有背景属性。它被称为简写属性。

而不是这样写：

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

您能够使用简写属性 background：

实例

使用简写属性在一条声明中设置背景属性：

body {
  background: #ffffff url("tree.png") no-repeat right top;  /*直接将属性的值写成一行*/
}

亲自试一试

在使用简写属性时，属性值的顺序为：

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可。请注意，在上面的例子中，我们没有使用 background-attachment 属性，因为它没有值。

所有 CSS 背景属性

属性	描述
background	在一条声明中设置所有背景属性的简写属性。
background-attachment	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	规定背景的绘制区域。
background-color	设置元素的背景色。
background-image	设置元素的背景图像。
background-origin	规定在何处放置背景图像。
background-position	设置背景图像的开始位置。
background-repeat	设置背景图像是否及如何重复。
background-size	规定背景图像的尺寸。

CSS 边框

CSS 边框属性

CSS border 属性允许您指定元素边框的样式、宽度和颜色。

我的所有边都有边框。

我有一条红色的下边框。

我有圆角边框。

我有一条蓝色的左边框。

CSS 边框样式

border-style 属性指定要显示的边框类型。

允许以下值：

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-style 属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）。

实例

演示不同的边框样式：

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

注意：除非设置了 border-style 属性，否则其他 CSS 边框属性（将在下一章中详细讲解）都不会有任何作用！

CSS 边框各边

CSS 边框 - 单独的边

从上一章的例子中，您已经看到可以为每一侧指定不同的边框。

在 CSS 中，还有一些属性可用于指定每个边框（顶部、右侧、底部和左侧）：

实例

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

不同的边框样式

上例的结果与此相同：

实例

p {
  border-style: dotted solid;
}

它的工作原理是这样的：

如果 border-style 属性设置四个值：

border-style: dotted solid double dashed;

上边框是虚线
右边框是实线
下边框是双线
左边框是虚线

如果 border-style 属性设置三个值：

border-style: dotted solid double;

上边框是虚线
右和左边框是实线
下边框是双线

如果 border-style 属性设置两个值：

border-style: dotted solid;

上和下边框是虚线
右和左边框是实线

如果 border-style 属性设置一个值：

border-style: dotted;

四条边均为虚线

实例

/* 四个值 */
p {
  border-style: dotted solid double dashed; 
}

/* 三个值 */
p {
  border-style: dotted solid double; 
}

/* 两个值 */
p {
  border-style: dotted solid; 
}

/* 一个值 */
p {
  border-style: dotted; 
}

CSS 简写边框属性

CSS Border - 简写属性

就像您在上一章中所见，处理边框时要考虑许多属性。

为了缩减代码，也可以在一个属性中指定所有单独的边框属性。

border 属性是以下各个边框属性的简写属性：

border-width
border-style（必需）
border-color
```
p {
  border: 5px solid red;
}
```
您还可以只为一个边指定所有单个边框属性：

左边框

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

下边框

p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}

CSS 圆角边框

border-radius 属性用于向元素添加圆角边框：

p {
  border: 2px solid red;
  border-radius: 5px;
}

Guanyu Liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS颜色与边框说明

CSS 颜色CSS 注释 CSS RGB 颜色指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。CSS 颜色名在 CSS 中，可以使用颜色名称来指定颜色：TomatoOrangeDodgerBlueMediumSeaGreenGraySlateBlueVioletLightGray亲自试一试CSS/HTML 支持140 种标准颜色名。CSS 背景色您可以为 HTML 元素设置背景色：Welcome t.
复制链接

扫一扫

专栏目录