边框与背景

字数: 0 字时长: 0 分钟

简介

CSS3 边框与背景是网页设计中至关重要的元素，它们能够显著影响网页的视觉效果和用户体验。本文主要介绍了 CSS3 边框与背景的属性和用法，包括边框属性、背景属性、边框圆角、边框阴影、背景图片、背景渐变等。

边框

边框属性

border-width：设置边框的宽度，常用单位为像素(px)。
border-style：设置边框的样式，如实线(solid)、虚线(dashed)、点线(dotted)等。
border-color：设置边框的颜色，可以使用颜色名称、十六进制颜色值或 RGB/RGBA 值。

综合使用这些属性可以定义一个完整的边框，例如：border: 2px solid #000;。

边框样式

solid：实线。
dashed：虚线。
dotted：点线。
double：双线。
groove：凹槽边框。
ridge：垄状边框。
inset：嵌入边框。
outset：凸出边框。

css

.border-style div {
  padding: 10px;
  margin: 10px;
}
.solid {
  border: 2px solid #000;
}
.dashed {
  border: 2px dashed #000;
}
.dotted {
  border: 2px dotted #000;
}
.double {
  border: 4px double #000;
}
.groove {
  border: 6px groove #dd5292;
}
.ridge {
  border: 6px ridge #dd5292;
}
.inset {
  border: 6px inset #dd5292;
}
.outset {
  border: 6px outset #dd5292;
}

solid 实线

dashed 虚线

dotted 点线

double 双线

groove 凹槽边框

ridge 峰垄边框

inset 嵌入边框

outset 凸出边框

边框圆角

border-radius：设置边框的圆角半径。

css

.radius-1 {
  border-radius: 50%;
}
.radius-2 {
  border-radius: 20px;
}
.radius-3 {
  border-radius: 50% 20%;
}

我的边框是圆形

我的边框是圆角矩形

我的边框是椭圆

边框阴影

box-shadow：设置边框的阴影效果。

使用box-shadow属性可以为元素添加阴影效果。

语法：box-shadow: x-offset y-offset blur spread color inset;

x-offset：水平阴影的偏移距离。
y-offset：垂直阴影的偏移距离。
blur：阴影的模糊半径。
spread：阴影的大小。
color：阴影的颜色。
inset：可选参数，将阴影设置为内阴影（默认为外阴影）。

例如：box-shadow: 5px 5px 10px #DD5292;

css

.box-shadow {
  width: 200px;
  height: 100px;
  box-shadow: 5px 5px 10px #dd5292;
}

边框图片

border-image：设置边框的图片。

使用border-image属性可以为元素添加边框图片。

语法：border-image: source slice width outset repeat;

source：边框图片的路径。
slice：定义边框图片的切片大小。
width：定义边框图片的宽度。
outset：定义边框图片的外边距。
repeat：定义边框图片的重复方式。

例如：border-image: url(png) 30 round;

css

.border-image {
  height: 100px;
  border: 10px solid #000;
  border-image: url(https://www.runoob.com/try/demo_source/border.png) 30 round;
}

背景

背景属性

background-color：设置背景颜色。
background-image：设置背景图片。
background-repeat：设置背景图片的重复方式。
background-position：设置背景图片的位置。
background-size：设置背景图片的大小。
background-attachment：设置背景图片的固定方式。

背景颜色

background-color：设置背景颜色。

css

.background-color-1 {
  width: 200px;
  height: 100px;
  background-color: #dd5292;
}

背景图片

background-image：设置背景图片。

背景重复

background-repeat：设置背景图片的重复方式。

背景位置

background-position：设置背景图片的位置。

背景大小

background-size：设置背景图片的大小。

css

.background-image-1 {
  width: 200px;
  height: 200px;
  /* 背景图片 图片大小1000px*1000px */
  background-image: url(https://huyipu.top/files/logo.png);
  /* 背景图片不重复 */
  background-repeat: no-repeat;
  /* 背景图片位置居中 */
  background-position: center;
  /* 背景图片大小 */
  background-size: 100%;
}

这是背景图片

再看看下面这个例子：

css

.background-image-2 {
  font-size: 20px;
  width: 200px;
  height: 200px;
  background-image: url(https://huyipu.top/files/logo.png);
  background-size: 20%;
}

这是背景图片

可以根据具体需求去设置你的背景图片！

背景固定

background-attachment：设置背景图片的固定方式。

background-attachment属性有三个主要的可选值，每个值对应不同的效果：

scroll：这是默认值。当页面滚动时，背景图像会跟随内容一起滚动。
这种方式最为常见，尤其是在长页面中，背景图像随着用户的浏览而移动。
fixed：背景图像固定在视窗中，不会随页面滚动。
这种效果可以为网页提供一种“深度感”，让页面内容仿佛在背景上滑动，营造出特殊的视觉体验。通常用于全屏背景图像的设计，比如摄影作品展示、产品宣传页面等。
local：背景图像与元素内容一起滚动，但仅限于该元素的滚动区域内。
也就是说，背景图像只会在该元素内部的滚动区域内移动，而不会随整个页面的滚动移动。这种效果适合应用在具有内部滚动区域的模块中，如滚动卡片、对话框或某些侧边栏。

背景渐变

background-image：设置背景渐变。

css

.background-image-3 {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to right, red, yellow);
}

这是背景渐变

最后更新于: 2024/11/8 16:00:01

边框与背景 ​

边框 ​

边框属性 ​

边框样式 ​

边框圆角 ​

边框阴影 ​

边框图片 ​

背景 ​

背景属性 ​

背景颜色 ​

背景图片 ​

背景重复 ​

背景位置 ​

背景大小 ​

背景固定 ​

背景渐变 ​