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

news2024/11/18 9:41:56

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.coloradmin.cn/o/1117509.html

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

相关文章

自动化测试08

自动化测试08

Junit 为什么学了Selenium还需学习Junit Selenium自动化测试框架&#xff1b;Junit单元测试框架。 拿着一个技术写自动化测试用例&#xff08;Selenium3&#xff09; 拿着一个技术管理已经编写好的测试用例&#xff08;Junit5&#xff09; Junit相关的技术 Junit是针对Java的一…
阅读更多...
Cesium Vue（五）— 绘制多边形

Cesium Vue（五）— 绘制多边形

1. 使用entity创建矩形 var rectangle viewer.entities.add({rectangle: {coordinates: Cesium.Rectangle.fromDegrees(// 西边的经度90,// 南边维度20,// 东边经度110,// 北边维度30),material: Cesium.Color.GREEN.withAlpha(0.8),},2. 使用primivite创建矩形 // primivite创…
阅读更多...
【公众号开发】Access Token的获取 · 请求公众号服务器创建自定义菜单 · 处理自定义菜单按钮事件

【公众号开发】Access Token的获取 · 请求公众号服务器创建自定义菜单 · 处理自定义菜单按钮事件

【公众号开发】&#xff08;3&#xff09; 文章目录 【公众号开发】&#xff08;3&#xff09;1. 获取Access token1.1 确定参数1.2 补全URL&#xff08;添加query string&#xff09;1.3 测试 2. 封装AccessToken以便保存与后期使用2.1 TokenUtils做出一些调整2.2 单例模式的A…
阅读更多...
YOLOv5改进实战 | 更换主干网络Backbone（三）之轻量化模型Shufflenetv2

YOLOv5改进实战 | 更换主干网络Backbone（三）之轻量化模型Shufflenetv2

前言 轻量化网络设计是一种针对移动设备等资源受限环境的深度学习模型设计方法。下面是一些常见的轻量化网络设计方法： 网络剪枝：移除神经网络中冗余的连接和参数，以达到模型压缩和加速的目的。分组卷积：将卷积操作分解为若干个较小的卷积操作，并将它们分别作用于输入的不…
阅读更多...
【手把手教你】使用Python玩转多元时间序列分析

【手把手教你】使用Python玩转多元时间序列分析

在探索和理解复杂的金融市场行为时&#xff0c;时间序列分析成为了一种无法忽视的强有力工具。特别是&#xff0c;当我们处理的不仅是单一的时间序列&#xff0c;而是多个时间序列并存&#xff0c;并且它们之间存在一种或多种形式的互动时&#xff0c;多元时间序列分析的重要性…
阅读更多...
线性代数3：矢量方程

线性代数3：矢量方程

一、前言 欢迎回到系列文章的第三篇文章&#xff0c;内容是线性代数的基础知识&#xff0c;线性代数是机器学习背后的基础数学。在我之前的文章中&#xff0c;我介绍了梯队矩阵形式。本文将介绍向量、跨度和线性组合&#xff0c;并将这些新想法与我们已经学到的内容联系起来。本…
阅读更多...
如何使用内网穿透技术实现USB设备（USB Redirector）共享

如何使用内网穿透技术实现USB设备（USB Redirector）共享

文章目录 前言1. 安装下载软件1.1 内网安装使用USB Redirector1.2 下载安装cpolar内网穿透 2. 完成USB Redirector服务端和客户端映射连接3. 设置固定的公网地址 前言 USB Redirector是一款方便易用的USB设备共享服务应用程序&#xff0c;它提供了共享和访问本地或互联网上的U…
阅读更多...
驱动开发 CoetexA7核 字符设备驱动（LED亮灯）（单独映射寄存器实现+封装结构体映射实现）

驱动开发 CoetexA7核 字符设备驱动（LED亮灯）（单独映射寄存器实现+封装结构体映射实现）

一、单独映射寄存器实现 可参考arm点灯C语言 cortex-A7核 点LED灯 &#xff08;附 汇编实现、使用C语言 循环实现、使用C语言 封装函数实现【重要、常用】&#xff09;-CSDN博客 1 应用程序 test.c #include <stdio.h> #include <sys/types.h> #include <sys/s…
阅读更多...
我的电子萝卜刀火了吗？

我的电子萝卜刀火了吗？

引言 大家好&#xff0c;我是亿元程序员&#xff0c;一位有着8年游戏行业经验的主程。 笔者在上一篇文章《萝卜刀真的太危险了,于是我用Cocos做了一个》中说到因女儿从学校回来之后想要我给她买一把萝卜刀被我拒绝&#xff0c;但是又想要让她体验一下&#xff0c;因此用Cocos…
阅读更多...
【广州华锐互动】建筑安全事故VR沉浸式体验系统

【广州华锐互动】建筑安全事故VR沉浸式体验系统

在建筑行业中&#xff0c;安全永远是首要的考虑因素。传统的安全培训方法&#xff0c;如书本教学、现场演示等&#xff0c;虽然能在一定程度上提高员工的安全意识&#xff0c;但这些方法往往缺乏实际体验&#xff0c;员工在真正面临危险时可能无法做出正确的判断和反应。近年来…
阅读更多...
nvm管理不同版本nodejs

nvm管理不同版本nodejs

文章目录 nvm下载卸载本地node安装nvm安装nodejsnvm查看已安装版本nvm切换nodejs版本nvm删除nodejs版本 nvm下载 nvm github下载链接 nvm 1.1.7-setup.zip&#xff1a;安装版&#xff0c;推荐使用 卸载本地node 打开cmd where node 找到上面找到的路径&#xff0c;将node.…
阅读更多...
gulp打包vue3+jsx+less插件

gulp打包vue3+jsx+less插件

最终转换结果如下 在根目录下添加gulpfile.js文件&#xff0c;package.json添加命令npm run gulp var gulp require(gulp) var babel require(gulp-babel) var less require(gulp-less) var del require(del); var spawn require(child_process).spawn;const outDir &…
阅读更多...
亚马逊测评，买家号支付不了、砍单率高是什么问题，需要怎么解决

亚马逊测评，买家号支付不了、砍单率高是什么问题，需要怎么解决

下半年旺季很多卖家都在使用自养号测评给产品冲一波权重&#xff0c;但是很多朋友会遇到下不了单或者砍单率过高等问题。有人以为是支付卡的问题&#xff0c;也有人觉得是IP被关联了。其实他们讲的也没错&#xff0c;但是&#xff0c;亚马逊风控不会针对某个点去进行检测&#…
阅读更多...
中小型企网搭建

中小型企网搭建

企业网项目建设实践 目录 企业网项目建设实践 一、 项目背景 二、 需求分析 三、 项目拓扑规划 四、 规划表 1. vlan规划 2. 设备管理规划 3. 端口互联规划 4. IP规划 5. SSH服务规划 五、 仿真拓扑 六、 项目实践&#xff08;配置过程&#xff09; 七…
阅读更多...
复杂的菱形继承及菱形虚拟继承（详解）

复杂的菱形继承及菱形虚拟继承（详解）

复杂的菱形继承及菱形虚拟继承 复杂的菱形继承及菱形虚拟继承虚拟继承解决数据冗余和二义性的原理笔试面试题 复杂的菱形继承及菱形虚拟继承 单继承&#xff1a;一个子类只有一个直接父类时称这个继承关系为单继承 多继承&#xff1a;一个子类有两个或以上直接父类时称这个继…
阅读更多...
计算机算法分析与设计（15）---贪心算法(虚拟汽车加油问题和最优分解问题)

计算机算法分析与设计（15）---贪心算法(虚拟汽车加油问题和最优分解问题)

文章目录 一、虚拟汽车加油问题1.1 问题描述1.2 思路分析1.3 代码编写 二、最优分解问题2.1 问题描述2.2 思路分析2.3 代码编写 一、虚拟汽车加油问题 1.1 问题描述 一辆虚拟汽车加满油后可行驶 n n n km。旅途中有若干加油站。设计一个有效算法&#xff0c;指出应在哪些加油…
阅读更多...
【STL】bitset位图的介绍和使用

【STL】bitset位图的介绍和使用

⭐博客主页&#xff1a;️CS semi主页 ⭐欢迎关注&#xff1a;点赞收藏留言 ⭐系列专栏&#xff1a;C进阶 ⭐代码仓库&#xff1a;C进阶 家人们更新不易&#xff0c;你们的点赞和关注对我而言十分重要&#xff0c;友友们麻烦多多点赞&#xff0b;关注&#xff0c;你们的支持是我…
阅读更多...
优思学院｜精益管理涵盖哪些内容？

优思学院｜精益管理涵盖哪些内容？

精益生产管理涵盖哪些内容&#xff1f;精益生产是一种以客户需求为引导、以消除浪费和持续改进为核心的生产管理模式&#xff0c;有效提升了公司的效率和利润&#xff0c;投入却极少。它包含哪些具体要素呢&#xff1f; 准时化生产&#xff08;JIT&#xff09; JIT&#xff0…
阅读更多...
idea调教-全键盘操作

idea调教-全键盘操作

先转个vim&#xff0c;现在代码编辑可以使用全部键盘 接下来键盘使用目录 现在需要在项目文件中进行跳转&#xff0c;idea在左边目录等进行切换使用alt1等可以切换左右目录等&#xff0c;用方向建可以选中对应的文件&#xff0c;使用shiftenter可以在右边打开新的标签页,使用a…
阅读更多...
日常--windows11右键切换回win10

日常--windows11右键切换回win10

文章目录 一&#xff0e;前言二&#xff0e;方法1.一键切换2.恢复回Win11右键菜单&#xff1a; 一&#xff0e;前言 从win10更新成win11后&#xff0c;很多地方不适应&#xff0c;这里演示如何将windows11右键切换回win10 二&#xff0e;方法 1.一键切换 winr打开运行 输入…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023