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

CSS新特性（2-2）

news 2025/9/15 10:05:21

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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/9/13 18:53:26

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/8/31 7:31:14

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/9/9 10:33:27

React Native 导航系统实战（React Navigation）

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

编程新知 2025/8/31 2:19:21

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

编程新知 2025/7/21 4:41:44

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/9/12 13:41:18

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/8 9:55:21

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/9/1 12:32:50

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36