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

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

  1. border-radius：设置元素的边框圆角的半径。可以使用四个值设置四个不同的圆角半径，也可以只使用一个值来设置统一的圆角。

  2. box-shadow：创建一个元素的阴影效果。可以设置水平偏移量、垂直偏移量、模糊程度以及颜色值，以实现不同的阴影效果。

  3. text-shadow：为文本添加阴影效果。可以设置水平偏移量、垂直偏移量、模糊程度以及颜色值来调整阴影的外观。

  4. transition：用于在给定的时间段内平滑地过渡一个或多个CSS属性的值。可以设置过渡的属性、持续时间、延迟时间和过渡的速度曲线函数。

  5. transform：用于对元素进行旋转、缩放、倾斜或平移变换。可以通过设置不同的转换函数来实现各种效果。

  6. opacity：设置元素的透明度。取值范围为0到1，0表示完全透明，1表示完全不透明。

  7. background-size：控制背景图片的尺寸。可以设置具体的宽度和高度值，也可以使用关键词（如"cover"或"contain"）来调整图片的显示方式。

  8. @media：用于根据设备的特性和媒体查询条件来应用不同的样式。可以根据屏幕宽度、设备类型等条件来设置样式规则。

  9. flexbox：一种用于创建灵活的布局的CSS3模块。通过设置容器的display属性为"flex"，子元素可以轻松地自动调整大小和位置。

  10. @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;

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

在这里插入图片描述

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

自然语言处理---RNN经典案例之使用seq2seq实现英译法

自然语言处理---RNN经典案例之使用seq2seq实现英译法

1 seq2seq介绍 1.1 seq2seq模型架构 seq2seq模型架构分析&#xff1a; seq2seq模型架构&#xff0c;包括两部分分别是encoder(编码器)和decoder(解码器)&#xff0c;编码器和解码器的内部实现都使用了GRU模型&#xff0c;这里它要完成的是一个中文到英文的翻译&#xff1a;欢迎…
阅读更多...
设计模式：策略模式（C#、JAVA、JavaScript、C++、Python、Go、PHP）

设计模式：策略模式（C#、JAVA、JavaScript、C++、Python、Go、PHP）

简介&#xff1a; 策略模式&#xff0c;它是一种行为型设计模式&#xff0c;它定义了算法族&#xff0c;分别封装起来&#xff0c;让它们之间可以互相替换。策略模式让算法的变化独立于使用算法的客户&#xff0c;降低了耦合&#xff0c;增加了系统的可维护性和可扩展性。 策…
阅读更多...
AI的Prompt是什么

AI的Prompt是什么

一.AI的Prompt的作用 在人工智能&#xff08;AI&#xff09;中&#xff0c;"Prompt"通常指的是向AI系统提供的输入或指令&#xff0c;用于引导AI进行特定的操作或生成特定的输出。例如&#xff0c;在一个对话型AI系统中&#xff0c;用户输入的问题就是一个prompt&…
阅读更多...
使用 VS 2022 开发C#项目的tips

使用 VS 2022 开发C#项目的tips

代码操作 删除注释或空行 参考C#【必备技能篇】Visual Studio删除所有的注释和空行 删除所有行注释&#xff1a;包括行内和行外&#xff0c;如下所示 Ctrl H 替换&#xff0c;第一行输入&#xff1a;//[^\n]*\n, 第二行输入&#xff1a;\n。替换即可。 这一步可能出现很多空…
阅读更多...
C#上位机序列9: 批量读写+事件广播+数据类型处理

C#上位机序列9: 批量读写+事件广播+数据类型处理

一、源码结构&#xff1a; 二、运行效果&#xff1a; 三、源码解析 1. 读取配置文件及创建变量信息&#xff08;点位名称&#xff0c;地址&#xff0c;数据类型&#xff08;bool/short/int/float/long/double&#xff09;&#xff09; 2. 异步任务处理&#xff1a;读任务&…
阅读更多...
组态软件和人机界面与plc之间Profinet无线通讯

组态软件和人机界面与plc之间Profinet无线通讯

在实际应用中&#xff0c;车间里分布的多台PLC&#xff0c;会由一台触摸屏集中控制&#xff0c;同时用户也许要将PLC数据共享给总控的上位机软件进行数据监控。此时需要实现&#xff0c;PLC、触摸屏、上位机之间的数据实时共享功能。在有通讯需求的时候&#xff0c;如果布线的话…
阅读更多...
正规文法、正规式、确定的有穷自动机DFA、不确定的有穷自动机NFA 的概念、区分以及等价性转换【我直接拿下！】

正规文法、正规式、确定的有穷自动机DFA、不确定的有穷自动机NFA 的概念、区分以及等价性转换【我直接拿下！】

文章目录 正规文法正规式有穷自动机确定的有穷自动机——DFA不确定的有穷自动机——NFADFA 与 NFA 的区分 正规式转换为正规文法正规文法转换为正规式NFA 转换为 DFANFA 最小化 NFA 转换为正规式正规式转换为 NFA正规文法转换为 NFANFA 转换为正规文法 前言&#xff1a; 在学习…
阅读更多...
每日一题 2316. 统计无向图中无法互相到达点对数（中等，图连通分量）

每日一题 2316. 统计无向图中无法互相到达点对数（中等，图连通分量）

题目很简单&#xff0c;只要求出每个连通分量有多少个节点即可首先通过建立一个字典来表示每个节点的邻接关系遍历每个节点&#xff0c;并通过邻接关系标记在当前连通分量内的所有的点&#xff0c;这样就可以知道一个连通分量内有多少个点在这里我陷入了一个误区&#xff0c;导…
阅读更多...
NET7下用WebSocket做简易聊天室

NET7下用WebSocket做简易聊天室

NET7下用WebSocket做简易聊天室 步骤&#xff1a; 建立NET7的MVC视图模型控制器项目创建websocket之间通信的JSON字符串对应的实体类一个房间用同一个Websocketwebsocket集合类&#xff0c;N个房间创建websocket中间件代码Program.cs中的核心代码&#xff0c;使用Websocket聊…
阅读更多...
【Linux】32条指令带你玩转 Linux ！

【Linux】32条指令带你玩转 Linux ！

目录 1&#xff0c;whoami 2&#xff0c;who 3&#xff0c;pwd 4&#xff0c;ls 1&#xff0c;ls 2&#xff0c;ls -l 3&#xff0c;ls -a 4&#xff0c;ls -al 5&#xff0c;ls -d 6&#xff0c;ls -ld 5&#xff0c;clear 6&#xff0c;cd 1&#xff0c;cd 2&…
阅读更多...
老胡的周刊（第112期）

老胡的周刊（第112期）

老胡的信息周刊[1]&#xff0c;记录这周我看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;内容主题极大程度被我个人喜好主导。这个项目核心目的在于记录让自己有印象的信息做一个留存以及共享。 &#x1f3af; 项目 LocalAI[2] &#x1f916; 免费、开源的 Ope…
阅读更多...
分类预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.分类预测 | MATLAB实现基于LSTM-Ada…
阅读更多...
强化学习问题（7）--- Python和Pytorch，Tensorflow的版本对应

强化学习问题（7）--- Python和Pytorch，Tensorflow的版本对应

1.问题 之前下载的python3.8&#xff0c;在对应Pytorch和Tensorflow时没太在意版本&#xff0c;在运行一些代码时&#xff0c;提示Pytorch和Tensorflow版本过高&#xff0c;直接降下来&#xff0c;有时候又和Python3.8不兼容&#xff0c;所以又在虚拟环境搞一个Pyhon3.7&#x…
阅读更多...
数字秒表verilog电子秒表跑表，代码/视频

数字秒表verilog电子秒表跑表，代码/视频

名称&#xff1a;数字秒表verilog电子秒表跑表 软件&#xff1a;Quartus 语言&#xff1a;Verilog 代码功能&#xff1a; 设计电子秒表&#xff0c;秒表时间精确到0.01秒&#xff0c;可通过按键控制秒表启动、暂停、复位。 代码需要在Mini_Star开发板验证。 开发板资料&…
阅读更多...
逐秒追加带序号输入当前时间:fgets fputs sprintf fprintf

逐秒追加带序号输入当前时间:fgets fputs sprintf fprintf

//向某文件中逐秒追加带序号输入当前时间 #include<stdio.h> #include<stdlib.h> #include<time.h> #include<string.h> #include <unistd.h> int main(int argc, char const *argv[]) { time_t tv; // time(&tv);//法1:获取秒数 …
阅读更多...
达索智能制造解决方案，敏捷电芯制造如何赋能企业竞争力 | 百世慧®

达索智能制造解决方案，敏捷电芯制造如何赋能企业竞争力 | 百世慧®

敏捷电芯制造赋能企业竞争力 全球电池市场正在快速扩大&#xff0c;为制造商带来巨大商机。 锂电行业的智能制造如何应用&#xff1f; 电池制造业的市场趋势是什么&#xff1f; 电池制造商面临哪些挑战&#xff1f; 特别是电池电芯制造方面&#xff0c;如何克服挑战获得竞…
阅读更多...
python爬虫入门（一）web基础

python爬虫入门（一）web基础

HTTP基本要点 HTTP请求&#xff0c;由客户端向服务端发出&#xff0c;可以分为 4 部分内容&#xff1a;请求方法&#xff08;Request Method&#xff09;、请求的网址&#xff08;Request URL&#xff09;、请求头&#xff08;Request Headers&#xff09;、请求体&#xff08…
阅读更多...
常见的状态转移矩阵和对应的运动模型

常见的状态转移矩阵和对应的运动模型

状态转移矩阵的形式取决于我们所建模的系统的动态特性。对于不同的运动模型&#xff0c;状态转移矩阵将会有所不同。以下是一些常见的状态转移矩阵和对应的运动模型&#xff1a; 恒定速度模型&#xff1a; 这是你给出的模型&#xff0c;其中物体假设以恒定速度移动。 恒定加速…
阅读更多...
209. 长度最小的子数组

209. 长度最小的子数组

209. 长度最小的子数组 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;__209长度最小的子数组_nlogn_n__209长度最小的子数组_n_1 原题链接&#xff1a; 209. 长度最小的子数组 https://leetcode.cn/problems/minimum-size-subarray-su…
阅读更多...
ThinkPHP 3.2 常用内置函数

ThinkPHP 3.2 常用内置函数

ThinkPHP 3.2 内置函数CDM疑问&#xff1a; D与M方法的相同点与不同点IAR 内置函数 C C方法是用于获取或修改&#xff0c;系统配置参数 语法&#xff1a; 获取&#xff1a;C&#xff08;需要获得的配置参数Name&#xff09; $value C(config_name);设置&#xff1a;C&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023