当前位置：首页 > news >正文

CSS3属性详解（一）文本盒模型中的 box-ssize 属性处理兼容性问题：私有前缀边框背景属性渐变前端开发入门笔记（七）

news 2026/4/2 10:32:06

CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表（Cascading Style Sheets）。下面是一些常用的CSS3属性及其详细解释：

border-radius：设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径，也可以只使用一个值来设置统一的圆角。
box-shadow：创建一个元素的阴影效果。可以设置水平偏移量、垂直偏移量、模糊程度以及颜色值，以实现不同的阴影效果。
text-shadow：为文本添加阴影效果。可以设置水平偏移量、垂直偏移量、模糊程度以及颜色值来调整阴影的外观。
transition：用于在给定的时间段内平滑地过渡一个或多个CSS属性的值。可以设置过渡的属性、持续时间、延迟时间和过渡的速度曲线函数。
transform：用于对元素进行旋转、缩放、倾斜或平移变换。可以通过设置不同的转换函数来实现各种效果。
opacity：设置元素的透明度。取值范围为0到1，0表示完全透明，1表示完全不透明。
background-size：控制背景图片的尺寸。可以设置具体的宽度和高度值，也可以使用关键词（如"cover"或"contain"）来调整图片的显示方式。
@media：用于根据设备的特性和媒体查询条件来应用不同的样式。可以根据屏幕宽度、设备类型等条件来设置样式规则。
flexbox：一种用于创建灵活的布局的CSS3模块。通过设置容器的display属性为"flex"，子元素可以轻松地自动调整大小和位置。
@keyframes：用于创建一个动画序列的关键帧。通过指定不同的关键帧和相应的样式规则，可以实现元素的逐帧动画效果。

以上仅是CSS3的一些常用属性，还有许多其他属性可以用于实现更丰富的样式效果和动画效果。需要根据具体的需求和使用场景选择合适的属性来应用样式。

文本

text-shadow：设置文本的阴影

格式举例：

text-shadow: 20px 27px 22px pink;

参数解释：水平位移垂直位移模糊程度阴影颜色。

效果举例：

举例：凹凸文字效果

text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开。我们来看个例子。

代码如下：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>body {background-color: #666;}div {font-size: 100px;text-align: center;font-weight: bold;font-family: "Microsoft Yahei";color: #666;}/* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/.tu {text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;}.ao {text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;}</style>
</head>
<body>
<div class="ao">生命壹号</div>
<div class="tu">生命壹号</div>
</body>
</html>

效果如下：

上图中，实现凹凸文字效果的方式比较简单，给左上角放黑色的阴影，右下角放白色的阴影，就达到了凹下去的效果。

在这里插入图片描述

盒模型中的 box-ssize 属性

在盒模型中，box-sizing属性用于控制元素的盒模型计算方式。而不存在box-ssize属性。

可用的值有两种：content-box和border-box。

content-box是默认值，表示元素的宽度和高度仅包括内容区域的尺寸，不包括边框、内边距和外边距。
border-box表示元素的宽度和高度包括内容区域、内边距、边框的尺寸，但不包括外边距。

示例代码：

.box {width: 200px;height: 100px;padding: 10px;border: 1px solid black;margin: 20px;box-sizing: content-box;
}.border-box {box-sizing: border-box;
}

以上例子中，.box元素使用了content-box，其实际宽度为（200 + 2 * 10 + 2 * 1）px，高度为（100 + 2 * 10 + 2 * 1）px。

而.border-box元素使用了border-box，其实际宽度和高度为200px和100px，包括了边框和内边距在内。

这样设置盒模型计算方式，可以更好地控制元素的尺寸和布局。

模型中的 box-sizing 属性

我们在之前的文章中专门讲过盒模型。

盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含：1. 内容区（Content）：这是元素的实际内容，如文本、图像等。
2. 填充区（Padding）：填充是内容周围的空间，它位于内容和边框之间。
3. 边框（Border）：边框是包围在内容和填充外部的线，它是可见的。
4. 外边距（Margin）：外边距是元素外部的空间，它在边框和其他元素之间。盒模型分为标准盒模型和怪异盒模型。在标准盒模型中，设置宽高之后，再设置border和padding。这个盒子的整体的宽高就是开始设置的宽高+padding+border，所以刚开始设置的宽高就是内容显示的宽高。而在怪异盒模型中，设置了宽高之后，不管有没有再设置border和padding，这个盒子都是前面设置的宽高。

CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。

这就需要用到 box-sizing 属性。它的属性值可以是 content-box 或 border-box。解释如下：

content-box 是 CSS 的默认方式，此时设置的 width 和 height 是内容区域的宽高。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。盒子的实际宽度 = 设置的 width + padding + border。
border-box 表示内减模式，此时设置的 width 和 height 是盒子的总宽高。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。盒子的实际宽度 = 设置的 width。

需要注意的是，为了处理兼容性问题，我们可以在使用时加上私有前缀，如 -webkit-box-sizing、-moz-box-sizing 等。

示例代码：

.box {width: 200px;height: 100px;padding: 10px;border: 1px solid black;margin: 20px;box-sizing: content-box;
}.border-box {box-sizing: border-box;
}

以上例子中，.box 元素使用了 content-box，其实际宽度为（200 + 2 * 10 + 2 * 1）px，高度为（100 + 2 * 10 + 2 * 1）px。

而 .border-box 元素使用了 border-box，其实际宽度和高度为200px和100px，包括了边框和内边距在内。

这样设置盒模型计算方式，可以更好地控制元素的尺寸和布局。

处理兼容性问题：私有前缀

通过网址 http://caniuse.com/ 可以查询 CSS3 各特性的支持程度。

处理兼容性问题的常见方法是为属性添加私有前缀。但应尽量避免使用这种方法，无需刻意去处理 CSS3 的兼容性问题。

私有前缀的举例：

比如说，我想给指定的 div 设置下面这样一个属性：

background: linear-gradient(left, green, yellow);

上面这个属性的作用是添加从左到右的线性渐变，颜色从绿色变为黄色。如果直接这样写属性，是看不到效果的：

在这里插入图片描述

此时，我们可以为浏览器添加不同的私有前缀，属性就可以生效了。格式如下：

-webkit-: 谷歌、苹果
-moz-: 火狐
-ms-：IE
-o-：欧朋

格式举例如下：

background: -webkit-linear-gradient(left, green, yellow);
background: -moz-linear-gradient(left, green, yellow);
background: -ms-linear-gradient(left, green, yellow);
background: -o-linear-gradient(left, green, yellow);
background: linear-gradient(left, green, yellow);

效果如下：

在这里插入图片描述

边框

边框的属性很多，其中边框圆角和边框阴影这两个属性，应用十分广泛，兼容性也相对较好，且符合渐进增强的原则，需要重点熟悉。

边框圆角：属性border-radius

边框的每个圆角，本质上是一个圆，圆有水平半径和垂直半径：如果二者相等，就是圆；如果二者不等，就是椭圆。

单个属性的写法：

border-top-left-radius: 60px 120px;        /* 参数解释：水平半径   垂直半径 */
border-top-right-radius: 60px 120px;
border-bottom-left-radius: 60px 120px;
border-bottom-right-radius: 60px 120px;

复合写法：

border-radius: 60px/120px;             /* 参数：水平半径/垂直半径 */
border-radius: 20px 60px 100px 140px;  /* 从左上开始，顺时针赋值。如果当前角没有值，取对角的值 */
border-radius: 20px 60px;

最简洁的写法：（四个角的半径都相同时）

border-radius: 60px;

举例：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.parent {width: 400px;}.box {width: 100px;height: 100px;float: left;border: 1px solid rgb(144, 12, 63);margin: 20px;text-align: center;line-height: 100px;color: #fff;font-size: 50px;background-color: rgb(255, 141, 26);}/*画圆形的方式一*/.box:nth-child(1) {border-radius: 50px;}/*画圆形的方式二*/.box:nth-child(2) {border-radius: 50%;}.box:nth-child(3) {border-radius: 100px 0 0 0;}.box:nth-child(4) {border-radius: 100px/50px;}.box:nth-child(5) {border-radius: 10%;}.box:nth-child(6) {border-radius: 0 100px;}</style>
</head>
<body><div class="parent"><div class="box">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">6</div>
</div>
</body>
</html>

效果如下：

在这里插入图片描述

边框阴影：属性box-shadow

格式举例：

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色;

参数解释：

水平偏移：正值向右，负值向左。
垂直偏移：正值向下，负值向上。
模糊程度：不能为负值。

效果如下：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

另外，后面还可以再加一个inset属性，表示内阴影。如果不写，则默认表示外阴影。例如：

box-shadow: 3px 3px 3px 3px #666 inset;

效果如下：

在这里插入图片描述

注意：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。

我们还可以设置多重边框阴影，实现更好的效果，增强立体感。

边框图片

边框图片有以下属性：

边框图片的路径：border-image-source: url("images/border.png");
图片边框的裁剪：border-image-slice: 27;
图片边框的宽度：border-image-width: 27px;
边框图片的平铺：
- repeat: 正常平铺，但可能会显示不完整
- round: 平铺，但保证图片完整
- stretch: 拉伸显示
- border-image-repeat: stretch;

我们也可以写成一个综合属性：

border-image: url("images/border.png") 27/20px round;

这个属性要好好理解，我们假设拿下面这张图来作为边框图片：

在这里插入图片描述

这张图片将会被"切割"成九宫格形式，然后进行平铺。四个角位置、形状保持不变，中心位置和水平垂直向两个方向平铺。
在这里插入图片描述

再具体一点：
在这里插入图片描述

CSS3属性详解（一）文本盒模型中的 box-ssize 属性处理兼容性问题：私有前缀边框背景属性渐变前端开发入门笔记（七）

CSS3是用于为HTML文档添加样式和布局的最新版本的层叠样式表（Cascading Style Sheets）。下面是一些常用的CSS3属性及其详细解释： border-radius：设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径，也可…...

编程日记 2023/10/25 19:17:47

小程序：如何合理规划分包使主包不超过2M

背景做过小程序项目的同学应该都有这样的经历，项目做着做着，突然发现代码包的大小超过了 2M，小程序无法提审，然后痛苦的删文件改代码来减少包大小。虽然我们也知道小程序给我们提供了分包的功能可以减少主包的大小&#xff0c…...

编程日记 2023/10/25 19:16:46

迭代器的封装与反向迭代器

一、反向迭代器在list模拟实现的过程中，第一次接触了迭代器的封装，将list的指针封装成了一个新的类型，并且以迭代器的基本功能对其进行了运算符重载反向迭代器是对正向迭代器的封装，并且体现了泛型编程的思想，任意…...

编程日记 2023/10/25 19:15:44

PHP项目学习笔记-萤火商城https://www.yiovo.com/doc

萤火商城学习笔记注意事项关于建表增加页面流程前台页面的数据列表数据下拉列表的数据关于时间的处理前台界面数据处理多年没有碰过php代码了，这个项目不错，想好好学习下，持续更新注意事项打开APP_DEBUG有些时候改了前台页面后&#x…...

编程日记 2023/10/25 19:14:43

我国有多少个港口？

港口是什么？ 港口是海洋运输中不可或缺的重要设施之一，是连接陆路和水路运输的重要节点。港口通常是指位于沿海地区的水陆交通枢纽，是船舶停靠、装卸货物、储存物资和维修船只的场所。港口一般由码头、泊位、仓库、货场、客运站等设施组成&a…...

编程日记 2023/10/25 19:13:42

uniapp实现登录组件之外区域置灰并引导登录

实现需求每个页面需要根据用户是否登录决定是否显示登陆组件,登录组件半屏底部显示,登录组件之外区域置灰,功能按钮点击之后引导提示登录.页面效果如下: 实现思路说明设置登录组件背景颜色为灰色,将页面分成登录区域(底部)和非登陆区域(上面灰色显示部分), 置灰区域添加…...

编程日记 2023/10/25 19:12:40

抄表系统是如何抄到电表水表的数据的？

抄表系统是一种利用无线通信技术，实现远程读取电表水表数据的系统。抄表系统主要由三部分组成：电表水表、集中器和后台管理平台。接下来，小编来为大家详细的介绍下抄表系统是如何抄到电表水表的数据的，一起来看下吧! 电表水表是抄…...

编程日记 2023/10/25 19:11:39

Qt之自定义事件QEvent

在Qt中，自定义事件的步骤大概如下： 1.创建自定义事件，自定义事件需要继承QEvent 2.使用QEvent::registerEventType()注册自定义事件类型，事件的类型需要在 QEvent::User 和 QEvent::MaxUser 范围之间，在QEvent::User之前是预留给系统的事件 3.使用sendEvent() 和 postEv…...

编程日记 2023/10/25 19:10:38

5.5G移动通信技术

5.5G即5G-Advanced，是一种移动通信技术。 5.5G 是 5G 和 6G 之间的过渡阶段，将在速率、时延、连接规模和能耗方面全面超越现有 5G，有望实现下行万兆和上行千兆的峰值速率、毫秒级时延和低成本千亿物联。按照国际标准组织 3GPP 定义&#xff…...

编程日记 2023/10/25 19:08:36

chrony时间服务

目录 1.1.重要性 1.2. Linux的两个时钟 1.3. NTP 1.4. Chrony介绍 2.安装与配置 2.1.安装: 2.2. Chrony配置文件分析 3.实验 3.1实验1 3.2实验2 3.常见时区 1.1.重要性 ●由于IT系统中，准确的计时非常重要，有很多种原因需要准确计时: 。在网络…...

编程日记 2023/10/25 19:07:34

音乐制作软件 Studio One 6 mac中文版软件特点

Studio One mac是一款专业的音乐制作软件，该软件提供了全面的音频编辑和混音功能，包括录制、编曲、合成、采样等多种工具，可用于制作各种类型的音乐，如流行音乐、电子音乐、摇滚乐等。 Studio One mac软件特点 1. 直观易用的界面&…...

编程日记 2023/10/25 19:06:32

// 连接redis单节点配置类Configuration public class RedisConfig {Value("${spring.redis.host}")private String host;Value("${spring.redis.port}")private Integer port;Value("${spring.redis.password}")private String password;/*** d…...

编程日记 2023/10/25 19:05:32

【ARM Coresight 系列文章19.1 -- Cortex-A720 PMU 详细介绍】

文章目录概述Cortex-A720 PMU Features1.1 PMU 使用介绍1.2 Performance monitors events1.3 Performance Monitors Extension registers1.3.1 Performance monitors program1.4 Performance monitors interrupts1.5 Interaction with the Performance Monitoring Unit and De…...

编程日记 2023/10/25 19:04:31

FoneDog iOS Unlocker(ios解锁工具) 适用macos电脑

FoneDog iOS Unlocker是一款专业的iOS设备解锁工具，旨在帮助用户解决iOS设备上的解锁问题。该软件支持解锁各种锁定类型，如数字密码锁、手势密码锁、Touch ID和Face ID等，可以解除iPhone、iPad和iPod Touch等设备的锁定状态。FoneDog iOS Unl…...

编程日记 2023/10/25 19:03:30

雅可比矩阵和雅可比坐标

雅可比行列式的简要介绍一、说明在本教程中，您将回顾一下雅可比行列式的简单介绍。完成本教程后，您将了解： 雅可比矩阵收集了可用于反向传播的多元函数的所有一阶偏导数。雅可比行列式在变量之间变化时非常有用，它充当一个坐标空…...

编程日记 2023/10/25 19:02:29

macOS鼠标管理操作增强BetterMouse简体中文

BetterMouse是一款专为Mac用户设计的鼠标增强工具，旨在帮助用户更好地掌握和管理鼠标操作。它提供了全局鼠标手势、高度可定制的鼠标设置选项以及一些有用的鼠标增强功能，如鼠标放大镜、鼠标轨迹和应用程序切换功能。这些功能可以大大提高用户的工作效率…...

编程日记 2023/10/25 19:01:27

塔式服务器介绍

大家都知道服务器分为机架式服务器、刀片式服务器、塔式服务器三类，今天小编就分别讲一讲这三种服务器，第三篇先来讲一讲塔式服务器的介绍。塔式服务器定义：塔式服务器的外观和普通电脑差不多，直立放置。机箱比较大，服…...

编程日记 2023/10/25 19:00:26

上海市道路数据，有63550条数据（shp格式和xlsx格式）

数据地址： 上海市道路https://www.xcitybox.com/datamarketview/#/Productpage?id391 基本信息. 数据名称: 上海市道路数据数据格式: Shpxlsx 数据时间: 2020年数据几何类型: 线数据坐标系: WGS84坐标系数据来源：网络公开数据数据字段&am…...

编程日记 2023/10/25 18:59:25

计算机网络_03_tcp/ip四层模型

文章目录 1.为什么会有tcp/ip?2.tcp/ip是什么?3.为什么会有tcp/ip四层模型?4.tcp/ip四层模型介绍 1.为什么会有tcp/ip? 早期的计算机(计算机网络没有出现之前)几乎都是各自为战, 各种操作系统厂家百花齐放, 市面上的大部分计算机使用的都是不同的操作系统, 为每个人提供定…...

编程日记 2023/10/25 18:58:25

NSC_BUILDER：全能Switch文件处理工具的深度应用指南

NSC_BUILDER：全能Switch文件处理工具的深度应用指南【免费下载链接】NSC_BUILDER Nintendo Switch Cleaner and Builder. A batchfile, python and html script based in hacbuild and Nuts python libraries. Designed initially to erase titlerights encryption…...

编程新知 2026/4/2 9:53:36

模型压缩新选择：用LLaMA-Factory实现QLoRA+GPTQ双重量化（附CUDA配置）

模型压缩新选择：用LLaMA-Factory实现QLoRAGPTQ双重量化实战指南当大语言模型的参数量突破百亿级别，如何在消费级显卡上实现高效推理成为开发者面临的核心挑战。传统单一量化方法往往需要在精度和效率之间艰难取舍，而混合量化技术正在打开新的…...

编程新知 2026/4/2 9:41:16

Alpamayo-R1-10B商业应用探索：车企研发提效与算法验证加速方案

Alpamayo-R1-10B商业应用探索：车企研发提效与算法验证加速方案 1. 项目概述 Alpamayo-R1-10B是NVIDIA推出的自动驾驶专用开源视觉-语言-动作(VLA)模型，作为新一代自动驾驶研发工具链的核心组件，正在改变车企的研发流程。这个100亿参数规模的…...

编程新知 2026/4/2 9:33:10

别再只用Arduino了！用ESP32+TSW-30浑浊度传感器做个智能鱼缸水质监测器（附完整代码）

ESP32TSW-30浑浊度传感器打造智能鱼缸水质监测系统养鱼爱好者都知道，水质是鱼类健康生长的关键因素。传统的人工检测方式不仅费时费力，还难以做到实时监控。今天我们就来动手打造一个基于ESP32和TSW-30浑浊度传感器的智能鱼缸水质监测系统，让…...

编程新知 2026/4/2 9:27:05

开源工具Wand Enhancer功能解锁技术指南

开源工具Wand Enhancer功能解锁技术指南【免费下载链接】Wand-Enhancer Advanced UX and interoperability extension for Wand (WeMod) app 项目地址: https://gitcode.com/gh_mirrors/we/Wand-Enhancer Wand Enhancer作为一款开源工具，通过本地验证技术为…...

编程新知 2026/4/2 9:27:00

中国四大高考工厂是哪四所

根据当前（2026年4月）可查的权威公开资料，‌“中国四大高考工厂”通常指以下四所中学‌： ‌1、河北衡水中学‌ 2、安徽毛坦厂中学‌ 3、‌河南郸城一高‌（即郸城县第一高级中学） 4、湖北黄冈中学 ‌ 背…...

编程新知 2026/4/2 8:20:02

AssetRipper终极指南：轻松提取Unity游戏资源的完整教程

AssetRipper终极指南：轻松提取Unity游戏资源的完整教程【免费下载链接】AssetRipper GUI Application to work with engine assets, asset bundles, and serialized files 项目地址: https://gitcode.com/GitHub_Trending/as/AssetRipper 还在为无法获取Uni…...

编程新知 2026/4/2 8:15:58

Qwen3.5-9B多模态能力解析：图文输入联合建模+VL变体兼容性说明

Qwen3.5-9B多模态能力解析：图文输入联合建模VL变体兼容性说明 1. 模型概述与核心能力 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型，在多模态理解和长上下文处理方面展现出卓越性能。作为当前开源社区的重要贡献，该模型特别强化了图文联合…...

编程新知 2026/4/2 7:17:04

YEDDA中文文本标注工具：零基础快速上手的高效标注解决方案

YEDDA中文文本标注工具：零基础快速上手的高效标注解决方案【免费下载链接】yedda-py3 项目地址: https://gitcode.com/gh_mirrors/ye/yedda-py3 在人工智能和自然语言处理领域，数据标注是构建高质量模型的基础。YEDDA中文文本标注工具是一款专为…...

编程新知 2026/4/2 7:13:03

Intv_AI_MK11 Anaconda数据科学环境配置：一站式AI研发平台搭建

Intv_AI_MK11 Anaconda数据科学环境配置：一站式AI研发平台搭建 1. 为什么选择Anaconda搭建AI开发环境如果你刚开始接触AI开发，可能会被各种环境配置问题困扰。不同框架的版本兼容性、CUDA驱动安装、Python包依赖冲突...这些问题足以让新手望而却步。A…...

编程新知 2026/4/2 6:34:35

文本

text-shadow：设置文本的阴影

举例：凹凸文字效果

盒模型中的 box-ssize 属性

模型中的 box-sizing 属性

处理兼容性问题：私有前缀

边框

边框圆角：属性border-radius

边框阴影：属性box-shadow

边框图片

相关文章：