CSS背景与边框——WEB开发系列18

news2024/11/15 10:49:37

网页设计中，背景和边框是用于提升视觉效果的关键元素。CSS（层叠样式表）提供了丰富的功能来定制这些视觉效果，确保网页看起来既美观又符合设计需求。

一、背景样式

背景样式在网页设计中起着至关重要的作用。它们可以用来增加页面的视觉吸引力，并使内容更加突出。CSS 提供了多种方法来控制背景的显示，包括背景颜色、背景图像、渐变等。

1、背景颜色

背景颜色是最基本的背景样式。它用于为元素指定一个单色背景。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色示例</title>
    <style>
        .background-color {
            background-color: #f0f8ff; /* AliceBlue */
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="background-color">
        这是一个背景颜色示例。
    </div>
</body>
</html>

2、背景图像

背景图像可以用于在元素上显示图片，以增强视觉效果。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像示例</title>
    <style>
        .background-image {
            background-image: url('https://4kwallpapers.com/images/walls/thumbs_2t/11393.png');
            background-size: cover; /* 或使用 contain 根据需要 */
            background-position: center;
            padding: 100px;
            border: 10px solid #ccc;
            height: 600px;
        }
    </style>
</head>
<body>
    <div class="background-image">
        这是一个背景图像示例。
    </div>
</body>
</html>

3、控制背景平铺行为

背景图像可以根据需要进行平铺、拉伸或缩放。通过使用 ​​background-repeat​​​ 属性，可以控制背景图像的平铺行为。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景平铺示例</title>
    <style>
        .background-repeat {
            background-image: url('https://4kwallpapers.com/images/walls/thumbs_2t/11393.png');
            background-repeat: no-repeat; /* 也可以使用 repeat 或 repeat-x */
            background-size: cover;
            padding: 100px;
            border: 10px solid #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="background-repeat">
        这是一个背景平铺行为示例。
    </div>
</body>
</html>

4、调整背景图像的大小

背景图像的大小可以使用 ​​background-size​​ 属性进行调整。常用的值包括 ​​contain​​、​​cover​​​ 以及具体的宽度和高度。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像大小示例</title>
    <style>
        .background-size {
            background-image: url('https://4kwallpapers.com/images/walls/thumbs_2t/11393.png');
            background-size: 50% 50%; /* 具体宽度和高度 */
            padding: 100px;
            border: 10px solid #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="background-size">
        这是一个背景图像大小调整示例。
    </div>
</body>
</html>

5、背景图像定位

通过 ​​background-position​​ 属性，可以控制背景图像的位置。常用值包括 ​​center​​、​​top​​、​​bottom​​、​​left​​ 和 ​​right​​​，也可以使用具体的像素值或百分比。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像定位示例</title>
    <style>
        .background-position {
            background-image: url('https://4kwallpapers.com/images/walls/thumbs_2t/11393.png');
            background-position: top right; /* 或使用 center center, 10px 20px 等 */
            background-size: cover;
            padding: 100px;
            border: 10px solid #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="background-position">
        这是一个背景图像定位示例。
    </div>
</body>
</html>

6、渐变背景

渐变背景可以通过 ​​background​​​ 属性创建渐变效果。常用的渐变包括线性渐变和径向渐变。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变背景示例</title>
    <style>
        .gradient-background {
            background: linear-gradient(to right, #ff7e5f, #feb47b); /* 线性渐变 */
            padding: 20px;
            border: 1px solid #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="gradient-background">
        这是一个渐变背景示例。
    </div>
</body>
</html>

7、多个背景图像

CSS 允许你在同一元素上应用多个背景图像。背景图像按照从上到下的顺序叠加显示。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多个背景图像示例</title>
    <style>
        .multiple-backgrounds {
            background-image: url('example1.jpg'), url('example2.jpg');
            background-position: center, top right;
            background-size: cover, contain;
            padding: 20px;
            border: 1px solid #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="multiple-backgrounds">
        这是一个多个背景图像示例。
    </div>
</body>
</html>

8、背景附加

背景附加属性决定背景图像是否在滚动时固定位置。​​background-attachment​​ 属性有三个值：​​scroll​​（默认值）、​​fixed​​ 和 ​​local​​。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景附加示例</title>
    <style>
        .background-attachment {
            background-image: url('https://4kwallpapers.com/images/walls/thumbs_2t/11393.png');
            background-attachment: fixed; /* 背景图像固定在视口 */
            background-size: cover;
            padding: 20px;
            border: 1px solid #ccc;
            height: 300px;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="background-attachment">
        这是一个背景附加示例。请滚动页面查看效果。
        <div style="height: 600px;"></div>
    </div>
</body>
</html>

9、使用 ​​background​​ 简写属性

​​background​​​ 是一个简写属性，可以一次性设置所有背景样式属性。它可以接受背景颜色、背景图像、背景位置、背景平铺等。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景简写属性示例</title>
    <style>
        .background-shorthand {
            background: #ff7e5f url('example.jpg') no-repeat center center / cover;
            padding: 20px;
            border: 1px solid #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="background-shorthand">
        这是一个背景简写属性示例。
    </div>
</body>
</html>

二、边框样式概述

边框是元素的轮廓，它们可以用来创建各种效果，如突出显示元素、分隔内容等。CSS 提供了多种方法来设置边框，包括边框宽度、边框样式、边框颜色、圆角等。

1、边框

边框的基本属性包括 ​​border-width​​、​​border-style​​ 和 ​​border-color​​。可以分别设置这些属性，也可以使用 ​​border​​​ 简写属性一次性设置。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框示例</title>
    <style>
        .border-example {
            border-width: 2px;
            border-style: solid;
            border-color: #333;
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="border-example">
        这是一个边框示例。
    </div>
</body>
</html>

2、边框圆角

边框圆角可以通过 ​​border-radius​​​ 属性实现。它可以设置元素四角的圆角半径，也可以单独设置每个角的圆角半径。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框圆角示例</title>
    <style>
        .border-radius {
            border: 2px solid #333;
            border-radius: 15px; /* 设置所有角的圆角半径 */
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="border-radius">
        这是一个边框圆角示例。
    </div>
</body>
</html>

3、边框简写属性

​​border​​​ 简写属性可以同时设置边框的宽度、样式和颜色。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框简写属性示例</title>
    <style>
        .border-shorthand {
            border: 3px dashed #ff6347; /* 边框宽度、样式和颜色 */
            padding: 20px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="border-shorthand">
        这是一个边框简写属性示例。
    </div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2069845.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

qt在ui上面给QWidget设置布局

qt在ui上面给QWidget设置布局

如图所示&#xff0c;我们无法给QWidget设置布局 拖拽一个GridLayout进来&#xff0c;设置QWidget布局&#xff0c;然后删掉该GridLayout 结果QWidget设置网格布局
阅读更多...
广州自闭症全托管学校-正规儿童康复中心

广州自闭症全托管学校-正规儿童康复中心

在繁华的广州城&#xff0c;有一个特殊的地方&#xff0c;那就是致力于自闭症儿童康复的星贝育园。星贝育园不仅在广州拥有校区&#xff0c;在浙江也有三个校区&#xff0c;它就像一盏明灯&#xff0c;照亮了自闭症儿童和他们家庭的前行之路。 走进星贝育园&#xff0c;你会感…
阅读更多...
【CUDA编程笔记】thrust::device_vector＜float＞ signal无法编译问题记录

【CUDA编程笔记】thrust::device_vector＜float＞ signal无法编译问题记录

thrust::device_vector signal无法编译问题记录 CUDA编程笔记 一、问题记录 正常编译时&#xff0c;无法编译 二、源码 #include <thrust/host_vector.h> #include <thrust/device_vector.h> #include <thrust/generate.h> #include <thrust/sort.…
阅读更多...
22：【stm32】定时器三：输出比较

22：【stm32】定时器三：输出比较

输出比较 1、简介2、标准库编程 1、简介 通过CCR里面的值和计数器CNT里面的值进行比较&#xff0c;然后输出高电平/单片机&#xff0c;进而产生需要的信号。 如上图所示&#xff0c;预分频器71&#xff0c;则最小单元为1us&#xff0c;自动重装器为999&#xff0c;则周期为1ms…
阅读更多...
InternLM + LlamaIndex RAG 实践

InternLM + LlamaIndex RAG 实践

1. 环境配置 首先创建一个虚拟环境 conda create -n llamaindex python3.10 为虚拟环境安装以下安装包 conda activate llamaindex conda install pytorch2.0.1 torchvision0.15.2 torchaudio2.0.2 pytorch-cuda11.7 -c pytorch -c nvidia pip install einops pip install …
阅读更多...
Midjourney提示词-动物系列-65

Midjourney提示词-动物系列-65

A super cute little anthropomorphic，sheep of the Chinese Zodiac， wearing berets ，in a Hanfu in red style,standing， eyes,cute tail,super realistic,super detail,luxurious,elegant,Unreal Engine,octane render, 8K,VRAY super realistic Pixar Style, Tiny cute…
阅读更多...
百数功能插件技术解析：审批流程设置与数据填写便捷性探讨

百数功能插件技术解析：审批流程设置与数据填写便捷性探讨

低代码平台作为一种创新的开发工具&#xff0c;正逐渐受到企业的青睐。为了进一步提升用户体验&#xff0c;满足用户多样化的需求&#xff0c;百数低代码平台开通了“有问必答”板块。 问题1&#xff1a;功能插件到底有什么用&#xff1f;都用在哪些位置&#xff1f; 功能插件…
阅读更多...
【大模型系列】Flash-VStream(2024.06)

【大模型系列】Flash-VStream(2024.06)

● Paper&#xff1a;https://arxiv.org/pdf/2406.08085v1 ● Github&#xff1a;https://github.com/IVG-SZ/Flash-VStream?tabreadme-ov-file#structure ● HuggingFace&#xff1a;https://huggingface.co/spaces/IVGSZ/Flash-VStream-demo ● Author&#xff1a;Haoji Zha…
阅读更多...
line-height的使用场景

line-height的使用场景

line-height:字面含义为行高&#xff0c;行高有三部分组成&#xff0c;分为内容高度&#xff0c;上间距&#xff0c;下间距。 可以看到文本在div盒子中的默认位置是左上角。此时文字部分的行高只有内容高度在支撑&#xff0c;上间距和下间距都是0。鼠标在字体上滑动时的蓝色部…
阅读更多...
【重点】人工智能大语言模型技术发展研究报告2024|附下载

【重点】人工智能大语言模型技术发展研究报告2024|附下载

人工智能作为引领新一轮科技产业革命的战略性技术和新质生产力重要驱动力&#xff0c;正在引发经济、社会、文化等领域的变革和重塑。 2023 年以来&#xff0c;以ChatGPT、GPT-4 为代表的大模型技术的出台&#xff0c;因其强大的内容生成及多轮对话能力&#xff0c;引发全球新…
阅读更多...
第2章-06-Cookie在网站回话中的作用

第2章-06-Cookie在网站回话中的作用

🏆作者简介，黑夜开发者，CSDN领军人物，全栈领域优质创作者✌，CSDN博客专家，阿里云社区专家博主，2023年CSDN全站百大博主。 🏆数年电商行业从业经验，历任核心研发工程师，项目技术负责人。 🏆本文已收录于专栏：Web爬虫入门与实战精讲，后续完整更新内容如下。 文章…
阅读更多...
3.5mm耳机插头制作手机内录线电路图

3.5mm耳机插头制作手机内录线电路图

1.背景 无人直播或录屏直播手机mic会对外界声音的录入&#xff0c;而且很嘈杂。 2.实现功能 手机酷狗播放音频&#xff0c;同时手机内打开录音软件录音&#xff0c;同一台手机操作。 3.电路图 接线分为2种&#xff0c;国标和美标&#xff0c;自己尝试&#xff0c;肯定有一…
阅读更多...
链表OJ题——链表的中间节点

链表OJ题——链表的中间节点

文章目录 一、题目链接二、解题思路三、解题代码 一、题目链接 链表的中间节点 二、解题思路 三、解题代码
阅读更多...
Python优化算法09——黏菌优化算法(SMA)

Python优化算法09——黏菌优化算法(SMA)

科研里面优化算法都用的多&#xff0c;尤其是各种动物园里面的智能仿生优化算法&#xff0c;但是目前都是MATLAB的代码多&#xff0c;python几乎没有什么包&#xff0c;这次把优化算法系列的代码都从底层手写开始。 需要看以前的文章可以参考&#xff1a;Python优化算法_阡之尘…
阅读更多...
护眼台灯有辐射吗？三大劣质护眼台灯危害曝光！

护眼台灯有辐射吗？三大劣质护眼台灯危害曝光！

护眼台灯有辐射吗&#xff1f;护眼台灯旨在提供便利、健康的光线环境&#xff0c;但作为光学测评师&#xff0c;我注意到一些低品质的护眼台灯可能存在严重问题。这些台灯如果使用劣质材料制造&#xff0c;在使用过程中可能会释放有害辐射&#xff0c;长期接触甚至可能引发黄斑…
阅读更多...
AI副业：用百度文库AI，我也能轻松创建漫画、画本？

AI副业：用百度文库AI，我也能轻松创建漫画、画本？

前言 作为一种受众广泛的艺术形式&#xff0c;漫画的影响力应该不需要我多说什么。 强烈的视觉化和叙事性&#xff0c;让漫画成为无数年轻读者的阅读启蒙&#xff0c;也让无数二十一世纪青年拥有了自己的「漫画梦」。可是要制作出一份能拿得出手的漫画谈何容易&#xff0c;先…
阅读更多...
SpringCloud之一注册中心（Eureka）

SpringCloud之一注册中心（Eureka）

一、Eureka概述 Eureka是Netflix公司开源的一个服务注册与发现的中间组件。 在微服务架构系统之中&#xff0c;我们经常提三个角色&#xff1a;注册中心 (Register)、服务提供者(Provider)、服务消费者(Consumer)。 1.注册中心&#xff1a;服务提供者可以将服务发布到注册中心…
阅读更多...
＜数据集＞考场行为识别数据集＜目标检测＞

＜数据集＞考场行为识别数据集＜目标检测＞

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;2192张 标注数量(xml文件个数)&#xff1a;2192 标注数量(txt文件个数)&#xff1a;2192 标注类别数&#xff1a;2 标注类别名称&#xff1a;[cheating, good] 序号类别名称图片数框数1cheating128214412good1067…
阅读更多...
边界dp注意重叠边界

边界dp注意重叠边界

前言&#xff1a;这个题目感觉不是简单的背包问题&#xff0c;因为我们这个是有限制的 想到了之前写的边界的dp&#xff0c;本来想定义二维dp&#xff0c;发现没必要二维dp&#xff0c;一维dp就够了&#xff0c;dp[i] 表示填充 1 - i 需要的最少的数量&#xff0c;符合子问题的…
阅读更多...
Redis内存淘汰

Redis内存淘汰

Redis内存淘汰 Redis可以存储多少数据 maxmemory配置&#xff0c;默认是注释掉的。 #maxmemory <bytes>我们可以主动配置maxmemory&#xff0c;maxmemory支持各种单位&#xff0c;默认是字节 maxmemory 1024 maxmemory 1024KB maxmemory 1024MB maxmemory 1024GB当Re…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023