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

CSS新特性（2-2）

news 2026/4/15 18:58:06

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

手把手教你用Eclipse搭建泰凌微TLSR8208开发环境（附SDK下载与避坑指南）

从零构建TLSR8208开发环境&#xff1a;Eclipse配置全攻略与实战避坑指南 当一块崭新的泰凌微TLSR8208蓝牙芯片放在桌上时&#xff0c;大多数嵌入式工程师的第一反应不是兴奋&#xff0c;而是隐隐的焦虑——如何快速搭建起可用的开发环境&#xff1f;本文将彻底解决这个痛点&…...

编程新知 2026/4/15 18:19:28

如何永久保存微信聊天记录？WeChatMsg免费工具让你告别数据丢失焦虑

如何永久保存微信聊天记录&#xff1f;WeChatMsg免费工具让你告别数据丢失焦虑 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trend…...

编程新知 2026/4/15 16:43:24

Windows下Labelme安装避坑指南：解决Qt插件加载失败和PyQt5版本冲突

Windows下Labelme安装全攻略&#xff1a;从环境配置到疑难解析 在计算机视觉和图像标注领域&#xff0c;Labelme以其简洁直观的界面和强大的功能成为众多开发者的首选工具。然而&#xff0c;对于Windows用户来说&#xff0c;安装过程往往伴随着各种环境配置问题&#xff0c;尤其…...

编程新知 2026/4/15 16:08:21

终极指南：如何在Windows上轻松安装APK文件

终极指南&#xff1a;如何在Windows上轻松安装APK文件 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 你是否厌倦了在Android模拟器和真实设备之间来回切换&#xff1f…...

编程新知 2026/4/15 14:48:30

Claude Skills到底解决了什么，没解决什么？从代码审查看AI技能模块化的真实代价

先说结论Skills通过文件级封装让AI在特定领域表现更稳定&#xff0c;但编写和维护成本不低&#xff0c;需要评估驱动开发避免文档膨胀代码审查这类任务适合用Skills标准化&#xff0c;但指令的自由度设定很关键&#xff0c;过细会僵化&#xff0c;过粗会失效Skills脚本需要自行…...

编程新知 2026/4/15 12:49:44

Sunshine游戏串流：从零到精通的终极自托管指南

Sunshine游戏串流&#xff1a;从零到精通的终极自托管指南 【免费下载链接】Sunshine Self-hosted game stream host for Moonlight. 项目地址: https://gitcode.com/GitHub_Trending/su/Sunshine 还在为远程游戏体验的延迟和画质妥协而烦恼吗&#xff1f;Sunshine作为一…...

编程新知 2026/4/15 12:43:37

ThinkPad风扇控制终极方案：TPFanCtrl2让你的笔记本散热更智能

ThinkPad风扇控制终极方案&#xff1a;TPFanCtrl2让你的笔记本散热更智能 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 想要彻底掌控ThinkPad笔记本的风扇噪音和散热…...

编程新知 2026/4/15 10:23:09

DM V5.0.6.03.103 Windows 2000 (2026.04.14）

...

编程新知 2026/4/15 9:17:27

Autoware实车部署避坑指南（一）-- 从零搭建矢量地图与Unity工具链实战

1. 为什么需要矢量地图与Unity工具链 第一次接触Autoware实车部署的朋友&#xff0c;往往会被矢量地图这个概念搞懵。简单来说&#xff0c;矢量地图就是给自动驾驶车辆用的"高精导航地图"&#xff0c;它不像我们手机导航用的普通地图那样只有粗略的道路信息。举个例子…...

编程新知 2026/4/15 6:28:35

嵌入式设备部署MogFace-large轻量版：从模型压缩到板载推理

嵌入式设备部署MogFace-large轻量版&#xff1a;从模型压缩到板载推理 最近有不少朋友在问&#xff0c;能不能把那些效果不错的人脸检测模型&#xff0c;比如MogFace-large&#xff0c;塞到树莓派或者Jetson Nano这类嵌入式板子里去跑。想法很好&#xff0c;但直接把原始模型丢…...

编程新知 2026/4/15 6:06:22