CSS复习高级部分（一）圆角、边框图像、多重背景

最新推荐文章于 2025-12-05 20:35:03 发布
原创 最新推荐文章于 2025-12-05 20:35:03 发布 · 285 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

本文介绍了CSS中的圆角、边框图像及多重背景等高级用法。通过border-radius属性可以轻松实现圆角效果，甚至绘制圆形。边框图像不仅应用于边框，还可以用于其他元素背景。多重背景则可通过background-size等属性灵活控制背景图的尺寸和位置。

其实CSS的一共总结了那么多，一直懒得发出来，今天把学完的发出来，顺便复习一下CSS。

在这里插入图片描述
在这里插入图片描述
一、圆角
CSS的圆角还常用于绘制圆形，可以用 border-radius:50%
二、边框图像
source slice width outset repeat 其实不止是边框背景图像，其它元素也有差不多的属性。
三、多重背景
1、多重背景的概念
2、多重背景的相关属性
backgroud-size|origin|clip
size，尺寸，contain：有包含的意思，背景图是能完全看到的；cover：覆盖
clip有修剪的意思，几个属性值border-box,padding-box,content-box，让人想起盒子模型

CSS3 边框、圆角、背景
corlin6688的博客
11-09 845
border-radius属性的值可以有1~4个值：四个值（第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角）；CSS3中包含几个新的背景属性，提供更大背景元素控制：background-image、background-size、background-origin、background-clip。一些最重要的CSS3模块如下：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。3）、background-origin属性指定背景图像的位置区域。
CSS3学习第4篇——边框图片
李小白的博客
12-21 379
1、border-image边框图片 属性 描述 CSS border-image 简写属性，设置所有 border-image-* 属性。 3 border-image-outset 规定边框图像区域超出边框的量。 3 border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretc...
CSS | 高级的框操作
zljiaa的博客
08-15 243
溢流 当你使用了绝对的值设置了一个框的大小（如，固定像素的宽 / 高），允许的大小可能不适合放置内容，这种情况下内容就会从盒子溢流。 我们使用overflow属性控制这种情况的发生。它最常用的值： auto: 当内容过多，溢流的内容被隐藏，然后出现滚动条来让我们滚动查看所有的内容。 hidden: 当内容过多，溢流的内容被隐藏。 visible: 当内容过多，溢流的内容被显示在盒子...
【CSS 22】圆角 椭圆角 边框图像 多重背景 背景尺寸 全尺寸背景图像 Hero Image background-origin属性 background-clip属性
Zane Boy's blogs
07-07 1108
圆角 椭圆角 边框图像 多重背景 背景尺寸 全尺寸背景图像 Hero Image background-origin属性 background-clip属性 在处理多重背景时，background-size 属性还可以接受多个设置背景尺寸的值（使用逗号分隔的列表）下面的例子指定了三幅背景图像，每幅图像有不同的 background-size 值。
CSS揭秘之多重边框&连续的图像边框
weixin_33725272的博客
04-20 175
1.多重边框 我们可以通过使用border-image来写一个多重边框，或使用多个元素来模拟多重边框，不过我们有更好的办法来制作一个多重边框，那就是使用box-shadow的第四个参数（称为扩张半径）来完成一个多重边框的制作，肯定大家都已经非常熟悉box-shadow了，不过我还是来复习一下。（1） box-shadow:none | <shadow>#where<shadow&...
CSS复习总结
weixin_44031282的博客
10-26 605
概念 CSS是一种描述HTML文档样式的语言，CSS描述了应该如何显示HTML元素;CSS意为层叠样式表(cascading style sheets)描述了如何在屏幕纸张挥着其他媒体上显示HTML元素，CSS的运用节省了大量的工作。它可以同时控制多张网页的布局，一般外部样式表都存储在CSS文件中。 CSS语法 · 语法 css规则集(rule-set)由选择器和声明块组成，如图： 选择器是选择需要添加对应样式的HTML元素。声明块；包含了一条或几条用分号隔开的描述语句(声明)，每条声明都包含了一个CSS属
CSS3复习
lb569484787的博客
09-17 532
一、CSS3简介 CSS3完全向后兼容。 CSS3 模块 CSS3 被划分为模块。 其中最重要的 CSS3 模块包括： ●选择器 ●框模型 ●背景和边框 ●文本效果 ●2D/3D 转换 ●动画 ●多列布局 ●用户界面 二、CSS3边框 通过 CSS3，能创建圆角边框，向矩形添加阴影，使用图片来绘制边框 。 复习以下属性： ●border-radius ●box-shadow ●border-ima...
打卡：CSS复习
weixin_47299259的博客
08-02 168
每日CSS复习
CSS揭秘：5.条纹背景（下）
Eighteen Z
07-08 703
上篇文章讲述了实现条纹效果所使用的CSS特性并实现了水平和垂直条纹，接下来我们来实现斜向条纹。 回忆一下之前的效果 水平条纹 background: linear-gradient(#fb3 33%, #58a 0, #58a 66%, yellowgreen 0); background-size: 100% 60px; 垂直条纹 background: linear-gradient(90deg, #fb3 33%, #58a 0, #58a 66%, yellowgreen 0); backgro
Web前端复习-5、CSS页面布局
qq_45560350的博客
06-16 402
1.盒子模型 在页面布局中，为了将页面元素合理有效地组织在一起，形成一套完整的、行之有效的原则和规范，称为盒子模型 页面中的所有元素都可以看成一个盒子，并占据一定的页面空间，通过盒子之间的嵌套、叠加或并列，最终形成了页面。 盒子模型是由内容（content）、边框（border）、内边距(padding) 和外边距(margin) 四部分组成 2.内容区content 内容区（content）是盒子模型的中心，包含了盒子的主要信息内容，例如文本、图片等。 内容区拥有width、heig.
css 圆角边框
09-25
由于许多浏览器不支持CSS3的圆角属性，设计师们通常采用切图的方法来实现圆角效果，即使用图像编辑软件制作四个不同角度的圆角图像，然后通过CSS将这些图像设置到HTML元素的相应位置，以形成完整的圆角边框效果。...
css圆角边框相关知识和代码演示
03-13
css圆角边框
CSS 制作圆角边框.docx
02-27
在CSS中制作圆角边框是一个长期困扰前端开发者的问题，特别是在早期，因为标准的CSS规范并不直接支持这个功能。然而，随着时间的推移，开发人员发明了各种技巧来实现圆角效果，即使在那些不完全支持CSS3的浏览器中。...
React大模型网站-流式推送markdown转换问题以及开启 rehype-raw,rehype-sanitize,remark-gfm等插件的使用
m0_61998604的博客
12-04 1146
本文介绍了在React大模型网站中实现流式推送Markdown转换的方法，重点讲解了ReactMarkdown库及其配套插件的使用。主要内容包括：1）ReactMarkdown基础用法；2）通过rehype-raw插件支持HTML标签渲染；3）使用rehype-sanitize防止XSS攻击；4）利用remark-gfm支持GitHub风格的Markdown语法；5）给出了完整的流式渲染实现方案，包含SSE推送、内容累积和实时更新等关键技术。文章还提供了完整的代码示例，帮助开发者快速实现安全可靠的Markd
50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）
HIT_Weston的博客
12-04 1389
本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git
前端仿真驱动创新：西门子FLOEFD的行业价值与应用指南
anscos的博客
12-05 1213
西门子Simcenter FLOEFD作为嵌入CAD的CFD解决方案，精准击中了现代研发“高效迭代、精准预判”的核心需求，其技术革新与应用实践为多行业带来了研发模式的重构，成为高端装备设计不可或缺的核心工具。西门子FLOEFD以“CAD原生、智能高效、多场协同”为核心，打破了设计与仿真的壁垒，尤其适配新能源、电子、增材制造等快速迭代的行业。其价值不仅在于缩短研发周期、降低试验成本，更在于推动工程师将“仿真思维”融入设计全流程，实现从“经验驱动”到“数据驱动”的转型。
多层环形图，自定义tooltip
好记性，不如烂键盘。
12-05 604
多层环形图，自定义tooltip。
前端项目 npm 镜像使用的顺序，和优先级顺序
最新发布
有一棵树的博客
12-05 678
package.json 文件中的 /URL/本地格式路径Git URLHTTP(s) URL / 压缩包 URLfile: 本地路径linkdirect source 不受 lockfile 和 .npmrc 影响，这些来源强绑定，不走 registry，也不走镜像，没有 fallbacklock 文件中 resolved 的镜像地址若 lockfile 记录了 tarball URL，则强制使用仅适用于 registry 包（不是 direct source）
《Java Web 期末项目分享：MVC+DBUtils+c3p0 玩转数据库增删改查》——第一弹
zzy_wqe的博客
12-04 1001
编写登录表单，提交到 LoginServlet；可读取 Cookie 自动填充用户名。启动 Tomcat，测试登录、增删改查是否正常（检查数据库数据变化、页面显示是否正确）；：编写表单，提交到对应 Servlet，实现数据录入 / 回显。确保未登录时直接访问 Servlet 会跳转到登录页。添加空值判断、数据库操作异常捕获，给出友好提示；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值