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;

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

在这里插入图片描述

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

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

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于Java的新闻发布管理系统设计与实现(源码+lw+部署文档+讲解等)

基于Java的新闻发布管理系统设计与实现(源码+lw+部署文档+讲解等)

文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序&#xff08;小蔡coding&#xff09; 代码参考数据库参考源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&am…
阅读更多...
华为云HECS云服务器docker环境下安装nacos

华为云HECS云服务器docker环境下安装nacos

华为云HECS云服务器&#xff0c;安装docker环境&#xff0c;查看如下文章。 华为云HECS安装docker-CSDN博客 一、拉取镜像 docker pull nacos/nacos-server二、宿主机创建挂载目录 执行如下命令&#xff1a; mkdir -p /usr/local/nacos/logs mkdir -p /usr/local/nacos/con…
阅读更多...
基于指数分布优化的BP神经网络（分类应用） - 附代码

基于指数分布优化的BP神经网络（分类应用） - 附代码

基于指数分布优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于指数分布优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.指数分布优化BP神经网络3.1 BP神经网络参数设置3.2 指数分布算法应用 4.测试结果…
阅读更多...
模型保存和加载

模型保存和加载

1、sklearn模型的保存和加载API from sklearn.externals import joblib 保存&#xff1a;joblib.dump(rf, ‘test.pkl’)加载&#xff1a;estimator joblib.load(‘test.pkl’) 2、决策树的模型保存加载案例 保存&#xff1a; import joblib from sklearn.model_selectio…
阅读更多...
OpenCV #以图搜图：感知哈希算法（Perceptual hash algorithm）的原理与实验

OpenCV #以图搜图：感知哈希算法（Perceptual hash algorithm）的原理与实验

1. 介绍 感知哈希算法&#xff08;Perceptual Hash Algorithm&#xff0c;简称pHash&#xff09; 是哈希算法的一种&#xff0c;主要用来做相似图片的搜索工作。 2. 原理 感知哈希算法&#xff08;pHash&#xff09;首先将原图像缩小成一个固定大小的像素图像&#xff0c;然后…
阅读更多...
【模式识别】贝叶斯决策模型理论总结

【模式识别】贝叶斯决策模型理论总结

贝叶斯决策模型理论 一、引言二、贝叶斯定理三、先验概率和后验概率3.1 先验概率3.2 后验概率 四、最大后验准则五、最小错误率六、最小化风险七、最小最大决策八、贝叶斯决策建模参考 一、引言 在概率计算中&#xff0c;我们常常遇到这样的一类问题&#xff0c;某事件的发生可…
阅读更多...
MobileNetV3

MobileNetV3

相对重量级网络而言&#xff0c;轻量级网络的特点是参数少、计算量小、推理时间短。更适用于存储空间和功耗受限的场景&#xff0c;例如移动端嵌入式设备等边缘计算设备。因此轻量级网络受到了广泛的关注&#xff0c;其中MobileNet可谓是其中的佼佼者。MobileNetV3经过了V1和V2…
阅读更多...
iOS 配置通用链接(Universal Link)服务端和开发者后台都配置好了，还是跳转不到App

iOS 配置通用链接(Universal Link)服务端和开发者后台都配置好了，还是跳转不到App

目录 一、什么是 Universal Link&#xff1f; 1.背景介绍 2.特点 3.运行机制原理&流程图 二、配置教程 1.第一步&#xff1a;开启 Associated Domains 服务 1.1 开通 Associated Domains 2.第二步&#xff1a;服务器配置 apple-app-site-association&#xff08;AAS…
阅读更多...
RISC-V架构——中断处理和中断控制器介绍

RISC-V架构——中断处理和中断控制器介绍

1、ARM架构中断机制介绍 本文不是从零开始讲解中断&#xff0c;对于中断的基本知识不再赘述&#xff0c;对中断不是很了解可以先学习ARM中断的文章。参考博客&#xff1a;《ARM架构的外部中断介绍(S5PV210芯片)》&#xff1b; 2、RIAC_V架构的中断控制器架构 &#xff08;1&…
阅读更多...
Qt之自定义事件QEvent

Qt之自定义事件QEvent

在Qt中，自定义事件的步骤大概如下： 1.创建自定义事件，自定义事件需要继承QEvent 2.使用QEvent::registerEventType()注册自定义事件类型，事件的类型需要在 QEvent::User 和 QEvent::MaxUser 范围之间，在QEvent::User之前是预留给系统的事件 3.使用sendEvent() 和 postEv…
阅读更多...
【软件安装】Linux系统中安装MySQL数据库服务

【软件安装】Linux系统中安装MySQL数据库服务

这篇文章&#xff0c;主要介绍如何在Linux系统中安装MySQL数据库服务。 目录 一、Linux安装MySQL 1.1、下载MySQL安装包 1.2、解压MySQL安装包 1.3、更改存放目录 1.4、创建用户组和用户 1.5、创建数据目录data 1.6、创建my.cnf配置文件 1.7、初始化数据库 1.8、添加m…
阅读更多...
C# 基于腾讯云人脸核身和百度云证件识别技术相结合的 API 实现

C# 基于腾讯云人脸核身和百度云证件识别技术相结合的 API 实现

目录 腾讯云人脸核身技术 Craneoffice.net 采用的识别方式 1、活体人脸核身(权威库)&#xff1a; 2、活体人脸比对&#xff1a; 3、照片人脸核身(权威库)&#xff1a; 调用成本 百度云身份证识别 调用成本 相关结合点 核心代码 实现调用人脸核身API的示例 实现调用身…
阅读更多...
微信小程序设置 wx.showModal 提示框中 确定和取消按钮的颜色

微信小程序设置 wx.showModal 提示框中 确定和取消按钮的颜色

wx官方提供的 showModal 无疑是个非常优秀的选择提示工具 但是 我们还可以让他的颜色更贴近整体的小程序风格 cancelColor 可以改变取消按钮的颜色 confirmColor 则可以控制确定按钮的颜色 参考代码如下 wx.showModal({cancelColor: #0000FF,confirmColor: #45B250,content:…
阅读更多...
行业追踪，2023-10-25

行业追踪，2023-10-25

自动复盘 2023-10-25 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…
阅读更多...
如何构建一个外卖微信小程序

如何构建一个外卖微信小程序

随着外卖行业的不断发展&#xff0c;越来越多的商家开始关注外卖微信小程序的开发。微信小程序具有使用方便、快速上线、用户覆盖广等优势&#xff0c;成为了商家们的首选。 那么&#xff0c;如何快速开发一个外卖微信小程序呢&#xff1f;下面就让我们来看看吧&#xff01; 首…
阅读更多...
Python Opencv实践 - 入门使用Tesseract识别图片中的文字

Python Opencv实践 - 入门使用Tesseract识别图片中的文字

做车牌识别项目前试一试tesseract识别中文。tesseract的安装使用请参考&#xff1a; Python OCR工具pytesseract详解 - 知乎pytesseract是基于Python的OCR工具&#xff0c; 底层使用的是Google的Tesseract-OCR 引擎&#xff0c;支持识别图片中的文字&#xff0c;支持jpeg, png…
阅读更多...
面试题之Vue和React的区别是什么？

面试题之Vue和React的区别是什么？

一提到前端框架&#xff0c;相信大家都对Vue和React不陌生&#xff0c;这两个前端框架都是比较主流的&#xff0c;用户也都比较多&#xff0c;但是我们在使用这些框架的时候&#xff0c;是否对这两个框架之间的区别有所了解呢&#xff1f;接下来&#xff0c;让我们来一起的系统…
阅读更多...
RK3399平台开发中安卓系统去除USB权限弹窗

RK3399平台开发中安卓系统去除USB权限弹窗

RK3399平台开发中安卓系统去除USB权限弹窗 问题方法 问题 当我们在访问一个插入到Android系统的USB设备的时候往往是需要权限的&#xff0c;此时系统会弹出询问权限的对话框&#xff0c;而我们此时希望让它默认允许访问USB设备并且不希望用户看到这个对话框。 方法 文件目录&…
阅读更多...
Git不常用命令(持续更新)

Git不常用命令(持续更新)

今日鸡汤&#xff1a;当你最满足的时候&#xff0c;通常也最孤独&#xff1b;当你最愤慨的时候&#xff0c;通常也最可怜。 此博文会列出一些平时不常用&#xff0c;但是能提高效率的git命令&#xff0c;后续会出IDEA对应的操作步骤 快看看你是不是都用过... 分支&#xff08;…
阅读更多...
蓝桥算法赛（铺地板）

蓝桥算法赛（铺地板）

问题描述 小蓝家要装修了&#xff0c;小蓝爸爸买来了很多块&#xff08;你可以理解为数量无限&#xff09; 23 规格的地砖&#xff0c;小蓝家的地板是 nm 规格的&#xff0c;小蓝想问你&#xff0c;能否用这些 23 的地砖铺满地板。 铺满地板&#xff1a;对于地板的每个区域&…
阅读更多...
最新文章

Copyright @ 2022~2023