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

CSS新特性（2-2）

news 2026/1/30 13:01:04

CSS新特性（2-2）

  • 前言
  • box相关
    • box-shadow
  • background背景
  • rgba颜色与透明度
  • transform:rotate(Xdeg) 2D旋转
  • transform:tranlate 平移

前言

本文继续讲解CSS3其他的新特性，想看之前新特性点击这里，那么好本文正式开始。

box相关

box-shadow

CSS3新增了边框阴影效果，一共四个属性值，可以控制想要控制的块边框阴影颜色、程度以及方向。
四个属性时：x偏移量，y偏移量，阴影模糊半径，阴影颜色
三个属性三个：x偏移量，y偏移量，阴影颜色
设置insert属性：insert属性为向边框内展示阴影。
同时也可以通过，来设置多个阴影。

举例：

<!DOCTYPE html>
<html>
<head><style>.normal{width:100px;height:100px;background-color:red;box-shadow:10px 10px blue,inset 10px 10px pink; }.normal2{width:100px;height:100px;background-color:red;box-shadow:10px 10px 5px gray;}</style>
</head>
<body><div class="normal"></div><br><br><div class="normal2"></div></body>
</html>

在这里插入图片描述

background背景

新增了几个背景属性，分别为
background-clip:确定背景所在区域，可以从边框、内容、内边距、默认四个方向进行选取。
background-origin:确定背景图片的对齐区域到底在哪里？默认都是左对齐，但是根据content内容左对齐还是内容+内边距左对齐，可以通过该属性设置。
background-size:控制背景图片的尺寸大小。
background：linear属性，可以设置线性渐变，如上下两个颜色渐变，左右两个颜色渐变，默认为上下渐变。

举例：

<!DOCTYPE html>
<html>
<head><style>.normal{width:100px;height:100px;background:linear-gradient(to right,#ccc,#000)}</style>
</head>
<body><div class="normal"></div><br><br></body>
</html>

在这里插入图片描述

rgba颜色与透明度

可以设置三个颜色属性，这些颜色属性可以是0-255数字，也可以是0-100%百分比，最后一个属性为透明度。
举例

<!DOCTYPE html>
<html>
<head><style>.normal{width:100px;height:100px;background: rgb(31 ,120 ,50);}</style>
</head>
<body><div class="normal"></div><br><br></body>
</html>

在这里插入图片描述

transform:rotate(Xdeg) 2D旋转

可以转换一个2D的块，单位是deg，可以是否正负值来进行方向的转换。
举例：

<!DOCTYPE html>
<html>
<head><style>.normal{width:100px;height:100px;border:1px solid gray;transform: rotate(100deg);}</style>
</head>
<body><div class="normal"></div><br><br></body>
</html>

在这里插入图片描述

transform:tranlate 平移

可以使用translate属性进行平移，向左或者向右移动，单位是px。

举例：

<!DOCTYPE html>
<html>
<head><style>.normal{width:100px;height:100px;border:1px solid gray;transform: translate(100px);}</style>
</head>
<body><div class="normal"></div><br><br></body>
</html>

使用前：
在这里插入图片描述
使用后：
在这里插入图片描述

相关文章：

CSS新特性（2-2）

CSS新特性&#xff08;2-2&#xff09; 前言box相关box-shadow background背景rgba颜色与透明度transform:rotate(Xdeg) 2D旋转transform:tranlate 平移 前言 本文继续讲解CSS3其他的新特性&#xff0c;想看之前新特性点击这里&#xff0c;那么好本文正式开始。 box相关 box…...

编程日记 2023/11/26 8:58:36

为什么，word文件在只读模式下，仍然能编辑？

Word文档设置了只读模式&#xff0c;是可以编辑的&#xff0c;但是当我们进行保存的时候就会发现&#xff0c;word提示需要重命名并选择新路径才能够保存。 这种操作&#xff0c;即使可以编辑文字&#xff0c;但是原文件是不会受到影响的&#xff0c;编辑之后的word文件会保存到…...

编程日记 2023/11/26 8:57:35

29 - 装饰器模式：如何优化电商系统中复杂的商品价格策略？

开始今天的学习之前&#xff0c;我想先请你思考一个问题。假设现在有这样一个需求&#xff0c;让你设计一个装修功能&#xff0c;用户可以动态选择不同的装修功能来装饰自己的房子。例如&#xff0c;水电装修、天花板以及粉刷墙等属于基本功能&#xff0c;而设计窗帘装饰窗户、…...

编程日记 2023/11/26 8:56:33

逆矩阵相关性质与例题

1.方阵的行列式&#xff1a;就是将方阵中的每一个元素转换至行列式中。 1.性质一&#xff1a;转置方阵的行列式等于转置前的行列式。&#xff08;对标性质&#xff1a;行列式与它的转置行列式相等&#xff09; 2.性质二&#xff1a;|ka||a|*k的n次方&#xff0c;n为方阵阶数。 …...

编程日记 2023/11/26 8:54:31

Ruoyi项目传List到后台并使用Excel模板下载数据的方法以及遇到的各种前后端数据交互问题

import { download } from @/utils/requestconst app = createApp(App)// 全局方法挂载 app.config.globalProperties.download = download 首先因为ruoyi-ui中的main.js有配置如上全局注册： 因此只需要在vue中定义一个方法直接使用this.download调用下载即可： （download的3…...

编程日记 2023/11/26 8:53:29

区块链技术将如何影响未来的数字营销？

你是否听腻了区块链和数字营销等流行语&#xff0c;却不明白它们对未来意味着什么&#xff1f;那么&#xff0c;准备好系好安全带吧&#xff0c;因为区块链技术将彻底改变我们对数字营销的看法。从建立消费者信任到提高透明度和效率&#xff0c;其可能性是无限的。 让我们来探…...

编程日记 2023/11/26 8:52:28

小程序wx:if和hidden的区别？

wx:if&#xff1a;wx:if 是一个完整的条件渲染指令&#xff0c;当它的表达式为真时&#xff0c;才会渲染该指令所在的元素。如果表达式的值为假&#xff0c;则不会渲染该元素。这意味着在表达式为假时&#xff0c;该元素及其子元素都不会被渲染&#xff0c;就像它们从未存在过一…...

编程日记 2023/11/26 8:51:27

分布式幂等

分布式幂等 在分布式系统、网络通信和数据库操作中&#xff0c;幂等性是一个非常重要的概念&#xff0c;特别是在面对可能发生网络故障、消息重复、或者系统崩溃等情况时。 举个简单的例子&#xff0c;考虑一个银行转账的操作。如果转账操作是幂等的&#xff0c;那么无论你执…...

编程日记 2023/11/26 8:50:26

大数据 DataX-Web 详细安装教程

目录 一、DataX-Web 介绍 1.1 DataX-Web 是什么 1.2 DataX-Web 架构 二、DataX-Web 安装部署 2.1 环境要求 2.2 安装 2.3 部署 2.4 数据库初始化 2.5 配置 2.6 启动服务 2.6.1 一键启动所有服务 2.6.2 一键取消所有服务 2.7 查看服务&#xff08;注意&#xff01…...

编程日记 2023/11/26 8:49:25

CSS3媒体查询实现不同宽度的下不同内容的展示

文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 &#x1f61c;当前文章系列专栏&#xff1a;CSS &#x1f43…...

编程日记 2023/11/26 8:48:24

使用 STM32 读取和解析 NTC 热敏电阻的数值

本文介绍了如何利用 STM32 微控制器读取和解析 NTC&#xff08;Negative Temperature Coefficient&#xff09;热敏电阻的数值。首先&#xff0c;我们将简要介绍 NTC 热敏电阻的原理和特性。接下来&#xff0c;我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…...

编程日记 2023/11/26 8:47:23

C#，数值计算——有理函数插值和外推（Rational_interp）的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { /// <summary> /// 有理函数插值和外推 /// Rational Function Interpolation and Extrapolation /// Given a value x, and using pointers to data xx and yy, this routine returns …...

编程日记 2023/11/26 8:45:22

力扣283:移动零(JAVA)

题目描述: 意思是将所有0移到最后的同时其余非0元素位置仍然不变 如 1 2 0 5 2 0 经过移动零后变为 1 2 5 2 0 0 思路:使用双指针的思路来写 fast:从左往右遍历数组 slow:非零元素最后的一个位置 将数组分为3个区间 [0,slow]为处理好的非0数据,slow永远指向最后一个非0数据 [s…...

编程日记 2023/11/26 8:43:20

【statsmodels】快速实现回归预测

python 做线性回归分析有好几种方式&#xff0c;常要的是 scipy 包&#xff0c;statsmodels 包&#xff0c;以及 sklearn包。 但是个人比较喜欢使用statsmodel进行线性回归&#xff0c;一是其可以更好的呈现回归效果&#xff0c;二是其能够自动跳过缺失值。 sklearn则不能方便…...

编程日记 2023/11/26 8:42:19

Kubernetes异常排查方式

集群信息&#xff1a; 1. 显示 Kubernetes 版本&#xff1a;kubectl version 2. 显示集群信息&#xff1a;kubectl cluster-info 3. 列出集群中的所有节点&#xff1a;kubectl get nodes 4. 查看一个具体的节点详情&#xff1a;kubectl describe node <node-name> 5. 列…...

编程日记 2023/11/26 8:41:18

【Linux】：信号的产生

信号 一.前台进程和后台进程1.前台进程2。后台进程3.总结 二.自定义信号动作接口三.信号的产生1.键盘组合键2.kill信号进程pid3.系统调用1.kill函数2.raise函数3.abort函数 四.异常五.软件条件六.通过终端按键产生信号 一.前台进程和后台进程 1.前台进程 一个简单的代码演示 …...

编程日记 2023/11/26 8:40:17

document load 和 document ready 的区别

"document load" 和 "document ready" 都是 JavaScript 中用于处理文档加载事件的术语&#xff0c;但是它们之间有一些重要的区别。 document load 在传统的 JavaScript 中&#xff0c;document.load 事件是当整个 HTML 文档完全加载并出现在浏览器中时触…...

编程日记 2023/11/26 8:39:16

flutter与原生Android通信方式之MethodChannel

闲来无事&#xff0c;flutter好久没看了&#xff0c;上次折腾flutter与Android通信没折腾完&#xff0c;有些事情耽搁了&#xff0c;这次继续 演示效果&#xff1a; flutter与Android原生通信 flutter端 import package:flutter/cupertino.dart; import package:flutter/mater…...

编程日记 2023/11/26 8:37:14

[PyTorch][chapter 66][强化学习-值函数近似]

前言 现实强化学习任务面临的状态空间往往是连续的,无穷多个。 这里主要针对这种连续的状态空间处理。后面DQN 也是这种处理思路。 目录&#xff1a; 1&#xff1a; 原理 2&#xff1a; 梯度更新 3&#xff1a; target 和 预测值 4 流程 一 原理 强化学习最重要的是得到 …...

编程日记 2023/11/26 8:36:13

hdlbits系列verilog解答（Exams/m2014 q4e）-46

文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 实现以下电路&#xff1a; 二、verilog源码 module top_module (input in1,input in2,output out);assign out ~(in1 | in2);endmodule三、仿真结果 转载请注明出处&#xff01;...

编程日记 2023/11/26 8:35:12

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/1/26 20:12:44

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2026/1/28 9:37:31

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

Java求职者面试指南：Spring、Spring Boot、MyBatis框架与计算机基础问题解析

Java求职者面试指南&#xff1a;Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问&#xff08;基础概念问题&#xff09; 1. 请解释Spring框架的核心容器是什么&#xff1f;它在Spring中起到什么作用&#xff1f; Spring框架的核心容器是IoC容器&#…...

编程新知 2025/10/4 21:24:40

基于Java+MySQL实现（GUI）客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

编程新知 2026/1/25 10:12:06

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2026/1/25 11:52:39

android13 app的触摸问题定位分析流程

一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...

编程新知 2026/1/28 11:04:03

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/11/26 20:46:42

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2026/1/3 7:21:08