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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/169172.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

二十三种设计模式全面解析-揭秘访问者模式:开启对象间灵活交互之门

在软件设计中&#xff0c;我们经常会遇到需要对一组对象进行操作和处理的情况。但是&#xff0c;如果对象结构复杂且对象类型众多&#xff0c;传统的处理方式可能会导致代码的冗长和维护困难。然而&#xff0c;访问者模式&#xff08;Visitor Pattern&#xff09;以其优雅的解决…

开源与闭源

我的观点&#xff1a; 开源与闭源软件都有各自的优势和劣势&#xff0c;没有绝对的对错之分。.. 一、开源和闭源的优劣势比较 开源的好处与劣处 优势&#xff1a; 创新与合作&#xff1a;开源软件能够吸引更多的开发者参与到项目中来&#xff0c;促进创新和合作。开放的源代码…

Redis(一):初始Redis

Redis基本介绍 Redis 的全称是 Remote Dictionary Server&#xff0c;Redis是一个开放源代码、内存数据结构存储系统&#xff0c;被广泛应用于缓存、消息队列、实时统计等场景。Redis使用C编写&#xff0c;支持多种数据结构&#xff0c;例如字符串&#xff08;strings&#xf…

【ArcGIS Pro微课1000例】0036:栅格影像裁剪与提取(矢量范围裁剪dem高程数据)

本实验讲解在ArcGIS Pro中进行栅格影像裁剪与提取(矢量范围裁剪dem高程数据)的方法。DEM、DOM、DSM等栅格数据方法也可以实现。 文章目录 一、加载实验数据二、裁剪工具的使用1. 裁剪栅格2. 按掩膜提取一、加载实验数据 加载配套实验数据包中的0036.rar中的dem数据和矢量裁剪…

jconsole的基本使用和死锁的检测

jconsole的基本使用和死锁的检测 因为jconsole是JDK自带的&#xff0c;所以安装了JDK就可以直接打开了。 1. 打开方式 cmd命令行打开&#xff1a;输入jconsole&#xff0c;然后按Enter JDK安装目录&#xff0c;bin目录下&#xff0c;双击即可打开 选择一个进程然后打开 可…

C语言字符串

字符串 字符串字面量 字符串字面量是用一对双引号括起来的字符序列。 例&#xff1a;"When you come to a fork in the road,take it." 延续字符串字面量 如果发现字符串字面量太长而无法放置在单独一行以内&#xff0c;只要把第一行用字符 \ 结尾&#xff0c;那…

深入解析Selenium动作链:精通点击、拖拽、切换等操作

背景&#xff1a; 一些交互动作都是针对某个节点执行的。比如&#xff0c;对于输入框&#xff0c;我们就调用它的输入文字和清空文字方法&#xff1b;对于按钮&#xff0c;就调用它的点击方法。其实&#xff0c;还有另外一些操作&#xff0c;它们没有特定的执行对象&#xff0…

中国信通院王蕴韬:从“好用”到“高效”,AIGC需要被再次颠覆

当下AIGC又有了怎样的颠覆式技术&#xff1f;处于一个怎样的发展阶段&#xff1f;产业应用如何&#xff1f;以及存在哪些风险&#xff1f;针对这些问题&#xff0c;我们与中国信通院云计算与大数据研究所副总工程师王蕴韬进行了一次深度对话&#xff0c;从他哪里找到了这些问题…

C#中的警告CS0120、CS0176、CS0183、CS0618、CS8600、CS8602、CS8604、CS8625及处理

目录 一、CS0120 二、CS0176 1.解决前 2.解决后 3.解决办法 三、CS0183 四、CS0618 五、CS8600 六、CS8602 七、CS8622 1. 解决前&#xff1a; 2. 解决后&#xff1a; 3.解决方法&#xff1a; 八、CS8604和CS8625 一、CS0120 严重性 代码 说明 项目 文件 行…

电路 buck-boost相关知识

BUCK-BOOST 文章目录 BUCK-BOOST前言一、DC-DC工作模式电容电感特性伏秒积平衡原理 二、BUCK电路三、BOOST电路四、BUCK-BOOST电路总结 前言 最近需要用到buck-boost相关的电路知识&#xff0c;于是便写下这篇文章复习一下。 一、DC-DC 在学习buck-boost电路之前我们先来看一…

邮件泄密案例分析

近日&#xff0c;一起令人震惊的事件在美军方内部引发了广泛关注。据报道&#xff0c;美军方意外将数百万封包含敏感信息的邮件发至非洲国家马里。这些邮件涉及的内容十分广泛&#xff0c;包括军事行动计划、人员部署、战术策略等&#xff0c;甚至还有部分涉及国家安全和战略决…

前缀和——238. 除自身以外数组的乘积

文章目录 &#x1f377;1. 题目&#x1f378;2. 算法原理&#x1f365;解法一&#xff1a;暴力求解&#x1f365;解法二&#xff1a;前缀和&#xff08;积&#xff09; &#x1f379;3. 代码实现 &#x1f377;1. 题目 题目链接&#xff1a;238. 除自身以外数组的乘积 - 力扣&a…

代码随想录算法训练营第五十八天|739. 每日温度、496. 下一个更大元素 I

第十章 单调栈part01 739. 每日温度 给定一个整数数组 temperatures &#xff0c;表示每天的温度&#xff0c;返回一个数组 answer &#xff0c;其中 answer[i] 是指对于第 i 天&#xff0c;下一个更高温度出现在几天后。如果气温在这之后都不会升高&#xff0c;请在该位置用…

小程序项目:springboot+vue基本微信小程序的学生健康管理系统

项目介绍 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;各行各业相继进入信息管理时…

C++ Qt QDataStream用法介绍

作者:令狐掌门 技术交流QQ群:675120140 csdn博客:https://mingshiqiang.blog.csdn.net/ 文章目录 基本使用QDataStream写入数据QDataStream读取数据数据流版本错误处理复杂类型自定义类型示例注意事项Qt中QDataStream 提供了一种与平台无关的方式来序列化二进制数据。这意味…

武汉教育E卡通学生证照片尺寸要求及证件照集中采集方法

”武汉教育E卡通“电子学生证旨在数字化中小学生身份&#xff0c;提供通用的教育卡&#xff0c;实现身份认证的电子化、权威化和集成化。校内一卡通系统包括刷卡考勤、电子班牌、图书借阅等&#xff0c;全面记录学生在校业务。同时&#xff0c;采集社会通行、实践活动等数据&am…

vue子组件修改prop的值

1.通过sync修饰符配合$emit&#xff0c;update实现 父组件&#xff1a; <template><child-view :num.sync"num"></child-view> </template> <script>import childView from ./assembly/childexport default {components: {childView…

PTA 密接判定v1(close_contact1)

Omicron变种病毒传染性太强了&#xff0c;城市屡屡破防。封闭在家的我决定为防疫做点事&#xff1a;帮助筛选密切接触、次密切接触人员。 网格员提供了一些小区的风险时段内的接触记录、确诊人员&#xff0c;需要判断人员的风险分类&#xff1a; A类&#xff1a;疑似病例、临床…

Redis大key与热Key

什么是 bigkey&#xff1f; 简单来说&#xff0c;如果一个 key 对应的 value 所占用的内存比较大&#xff0c;那这个 key 就可以看作是 bigkey。具体多大才算大呢&#xff1f;有一个不是特别精确的参考标准&#xff1a; bigkey 是怎么产生的&#xff1f;有什么危害&#xff1f;…

Redis数据备份和还原

Redis SAVE 命令用于创建当前数据库的备份文件&#xff0c;文件名默认为dump.rdb。备份数据库数据可以增强对数据的保护&#xff0c;提升数据的安全性。当数据不小心丢失或者被删除时&#xff0c;我们就可以通过相应的操作进行数据恢复。本节介绍 Redis 的数据备份和数据还原操…