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

CSS新特性（2-2）

news 2025/11/26 10:58:51

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

（十）学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

编程新知 2025/11/21 6:09:18

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/11/19 4:51:49

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/11/17 14:07:59

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

编程新知 2025/11/16 22:04:28

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2025/11/22 22:07:28

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/11/18 8:58:32

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2025/11/18 18:57:56

【Go语言基础【12】】指针：声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...

编程新知 2025/6/21 2:18:57

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】&#xff1a;开启编程世界的奇妙冒险 嘿&#xff0c;各位编程小白探险家&#xff01;欢迎来到 C# 的奇幻大陆&#xff01;今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类&#xff01;别害怕&#xff0c;跟着我&#xff0c;保准让你轻松搞…...

编程新知 2025/10/31 20:37:10