CSS新特性(2-2)
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新特性(2-2) 前言box相关box-shadow background背景rgba颜色与透明度transform:rotate(Xdeg) 2D旋转transform:tranlate 平移 前言 本文继续讲解CSS3其他的新特性,想看之前新特性点击这里,那么好本文正式开始。 box相关 box…...
为什么,word文件在只读模式下,仍然能编辑?
Word文档设置了只读模式,是可以编辑的,但是当我们进行保存的时候就会发现,word提示需要重命名并选择新路径才能够保存。 这种操作,即使可以编辑文字,但是原文件是不会受到影响的,编辑之后的word文件会保存到…...
29 - 装饰器模式:如何优化电商系统中复杂的商品价格策略?
开始今天的学习之前,我想先请你思考一个问题。假设现在有这样一个需求,让你设计一个装修功能,用户可以动态选择不同的装修功能来装饰自己的房子。例如,水电装修、天花板以及粉刷墙等属于基本功能,而设计窗帘装饰窗户、…...
逆矩阵相关性质与例题
1.方阵的行列式:就是将方阵中的每一个元素转换至行列式中。 1.性质一:转置方阵的行列式等于转置前的行列式。(对标性质:行列式与它的转置行列式相等) 2.性质二:|ka||a|*k的n次方,n为方阵阶数。 …...
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…...
区块链技术将如何影响未来的数字营销?
你是否听腻了区块链和数字营销等流行语,却不明白它们对未来意味着什么?那么,准备好系好安全带吧,因为区块链技术将彻底改变我们对数字营销的看法。从建立消费者信任到提高透明度和效率,其可能性是无限的。 让我们来探…...
小程序wx:if和hidden的区别?
wx:if:wx:if 是一个完整的条件渲染指令,当它的表达式为真时,才会渲染该指令所在的元素。如果表达式的值为假,则不会渲染该元素。这意味着在表达式为假时,该元素及其子元素都不会被渲染,就像它们从未存在过一…...
分布式幂等
分布式幂等 在分布式系统、网络通信和数据库操作中,幂等性是一个非常重要的概念,特别是在面对可能发生网络故障、消息重复、或者系统崩溃等情况时。 举个简单的例子,考虑一个银行转账的操作。如果转账操作是幂等的,那么无论你执…...
大数据 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 查看服务(注意!…...
CSS3媒体查询实现不同宽度的下不同内容的展示
文章目录 前言CSS3 多媒体查询实例520 到 699px 宽度 - 添加邮箱图标700 到 1000px - 添加文本前缀信息大于 1001px 宽度 - 添加邮件地址大于 1151px 宽度 - 添加图标代码后言 前言 hello world欢迎来到前端的新世界 😜当前文章系列专栏:CSS ὃ…...
使用 STM32 读取和解析 NTC 热敏电阻的数值
本文介绍了如何利用 STM32 微控制器读取和解析 NTC(Negative Temperature Coefficient)热敏电阻的数值。首先,我们将简要介绍 NTC 热敏电阻的原理和特性。接下来,我们将详细讨论如何设计电路连接和采用合适的 STM32 外设进行数值读…...
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 …...
力扣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…...
【statsmodels】快速实现回归预测
python 做线性回归分析有好几种方式,常要的是 scipy 包,statsmodels 包,以及 sklearn包。 但是个人比较喜欢使用statsmodel进行线性回归,一是其可以更好的呈现回归效果,二是其能够自动跳过缺失值。 sklearn则不能方便…...
Kubernetes异常排查方式
集群信息: 1. 显示 Kubernetes 版本:kubectl version 2. 显示集群信息:kubectl cluster-info 3. 列出集群中的所有节点:kubectl get nodes 4. 查看一个具体的节点详情:kubectl describe node <node-name> 5. 列…...
【Linux】:信号的产生
信号 一.前台进程和后台进程1.前台进程2。后台进程3.总结 二.自定义信号动作接口三.信号的产生1.键盘组合键2.kill信号进程pid3.系统调用1.kill函数2.raise函数3.abort函数 四.异常五.软件条件六.通过终端按键产生信号 一.前台进程和后台进程 1.前台进程 一个简单的代码演示 …...
document load 和 document ready 的区别
"document load" 和 "document ready" 都是 JavaScript 中用于处理文档加载事件的术语,但是它们之间有一些重要的区别。 document load 在传统的 JavaScript 中,document.load 事件是当整个 HTML 文档完全加载并出现在浏览器中时触…...
flutter与原生Android通信方式之MethodChannel
闲来无事,flutter好久没看了,上次折腾flutter与Android通信没折腾完,有些事情耽搁了,这次继续 演示效果: flutter与Android原生通信 flutter端 import package:flutter/cupertino.dart; import package:flutter/mater…...
[PyTorch][chapter 66][强化学习-值函数近似]
前言 现实强化学习任务面临的状态空间往往是连续的,无穷多个。 这里主要针对这种连续的状态空间处理。后面DQN 也是这种处理思路。 目录: 1: 原理 2: 梯度更新 3: target 和 预测值 4 流程 一 原理 强化学习最重要的是得到 …...
hdlbits系列verilog解答(Exams/m2014 q4e)-46
文章目录 一、问题描述二、verilog源码三、仿真结果 一、问题描述 实现以下电路: 二、verilog源码 module top_module (input in1,input in2,output out);assign out ~(in1 | in2);endmodule三、仿真结果 转载请注明出处!...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间, 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点,不需要开启数据库闪回。…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
visual studio 2022更改主题为深色
visual studio 2022更改主题为深色 点击visual studio 上方的 工具-> 选项 在选项窗口中,选择 环境 -> 常规 ,将其中的颜色主题改成深色 点击确定,更改完成...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径, 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解,但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后,通常在该文件中会出现以下配置&…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表
1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
