CSS3样式详解之圆角、阴影及变形

目录

  • 前言
  • 一、圆角样式(border-radius)
  • 二、元素阴影(box-shadow)
  • 三、过渡动画样式(transition)
    • 1. transition-property(用于设置属性名称)
    • 2. transition-duration(设置时间)
    • 3. transition-timing-function(设置速度曲线)
    • 4. transition-delay(设置延长时间)
    • 5. 缩写样式(transition)
  • 四、变形样式(transform)
    • 1.缩放样式(scaleX和scaleY)
    • 2. 平移样式(translateX和translateY)
    • 3. 旋转样式(rotate)
    • 4. 倾斜扭曲样式(skew)
    • 5. 变形样式的中心点(transform-origin)
    • 6. 3D旋转(rotateX和rotateY)
    • 7、景深样式
    • 8. 平移Z轴

前言

  本节内容主要讲述的是CSS3样式相关知识,从圆角样式开始,之后就是元素阴影、过渡样式、变形样式以及详细的选择器样式、自定义视频播放器、弹性布局等等,知识点较为详尽,内容可能较长。

一、圆角样式(border-radius)

  在CSS3中,我们通常使用border-raduis来设定元素的圆角,通过改变border-radius的取值来设定元素圆角的样式。

border-radius:50px;

  该样式可以设定1~4个值来控制元素的四个角,取值可以是像素值(px),也可以是百分比,50%是该形状最大的圆形状态。

border-radius:100px;
border-radius:30%

  当我们设定一个值的时候,四个角都是这个值来设定圆角样式;如果是两个值,则第一个值代表的是左上和右下,第二个值代表的是右上和左下;如果是三个值,则第一个值代表左上,第二个值代表右上和左下,第三个值代表右下;如果是四个值,则从左上开始,分别代表左上,右上,右下,左下。

border-radius:100px;
border-radius:100px 75px;
border-radius:100px 75px 50px;
border-radius:100px 75px 50px 25px;

  当我们只想要单独设置一个角的圆角样式的时候,我们可以使用border-top-left-radius,border-top-right-radius,border-bottom-right-radius,border-bottom-left-radius表示。

border-top-left-radius:100px;	//左上
border-top-right-radius:75px;	//右上
border-bottom-right-radius:50px;	//右下
border-bottom-left-radius:25px;		//左下

  最低支持圆角的IE浏览器为IE9,更低级的IE则不显示该样式。

二、元素阴影(box-shadow)

  元素阴影样式在前端开发中很常见,最经典的例子就是鼠标右键,当我们右键页面的时候会出现一个菜单栏,菜单栏就有一个阴影效果。在CSS中我们采用box-shadow来设置元素的阴影样式。
阴影
  box-shadow中有五个值,第一个值是阴影右移距离,第二个值是阴影下移距离,第三个值是blur(模糊度),第四个值是spread(大小),第五个值是color(颜色)。
  阴影大小不算进元素大小内。

box-shadow:x y blur spread color;	//阴影右移距离 阴影左移距离 模糊度 大小  颜色

  在JavaScript中,不止有外阴影,同时还有内阴影,只不过内阴影的使用频率不如外阴影高。同样内阴影和外阴影相同,都有五个值,使用方法如下:
box-shadow:inset x,y,blur,spread,color
//ex:box-shadow:inset 100px 150px 10px 100px red

效果图如下:
在这里插入图片描述
  当有多个阴影的时候,阴影的显示效果由阴影代码的先后决定,先者在上。

三、过渡动画样式(transition)

  在前端开发中,我们能够创建动画,可以在许多网页中取代动画图片、Flash动画以及JavaScript。通常用transition来设置,在transition中,有transition-propertytransition-durationtransition-timing-functiontransition-delay

1. transition-property(用于设置属性名称)

  transition-property用于规定设置过渡效果的CSS属性的名称。

//ex:
transition-property:width;//只有width过渡
transition-property:height;//只有height过渡
transition-property:all;

2. transition-duration(设置时间)

  transition-duration用于规定设置过渡效果的时间。

//ex:
transition-duration:10s;
transition-duration:5s;

3. transition-timing-function(设置速度曲线)

   transition-timing-function用于规定速度效果的速度曲线。官方给出了五种效果:linear(匀速)、ease(变速)、ease-inease-outease-in-out,还有就是可以自定义速度曲线(贝塞尔曲线)
  贝塞尔曲线:cubic-bezier(n,n,n,n,);
贝塞尔曲线自定义网址:https://cubic-bezier.com/ 在该网址,我们可以自定义数值来获取到我们想要的贝塞尔曲线。

//ex:
transition-timing-function:cubic-bezier(.25,.1,.25,1)

贝塞尔曲线图如下:
在这里插入图片描述

4. transition-delay(设置延长时间)

  transition-delay用于定义过渡效果的延时时间。

//ex:
transition-delay:3s;

5. 缩写样式(transition)

  transtion的默认值有四个,all(transition-property),0(transition-duration),ease(transtion-timing-function),0(transition-delay)。过渡时间喝延时时间在缩写样式中的位置不可互换。
浏览器支持

四、变形样式(transform)

  transform是CSS样式中非常重要的一部分内容,通过变形样式可以实现很多种效果,包括但不限于缩放、平移、旋转等。

1.缩放样式(scaleX和scaleY)

  scale用于对元素进行缩放,CSS样式中的缩放是二维中的缩放,所以元素只可以沿着x轴和y轴的方向上进行缩放,用于x轴缩放的为(scaleX),用于y轴缩放的为(scaleY),

//ex:
transform:scaleX(2);
transform:scaleY(1.5);

  当括号内的数值大于1的时候为放大,数值为0~1的时候为缩小。
元素的缩放只是视觉效果上的缩放,并不会影响到元素的位置。


  缩放样式可以缩写为scale(),当括号内有两个数值的时候【scale(x,y)】,则这两个数值前者代表x轴缩放大小,后者代表y轴缩放大小;当括号内只有一个数值的时候【scale(xy)】,则这个数值代表x轴和y轴缩放的大小。

transform: scale(x,y);
transform:scale(xy);
//ex:
transform:scale(5,6);
transform:scale(5);

  当x,y的值为负数的时候,元素会呈镜像状态。

2. 平移样式(translateX和translateY)

  translate在CSS3中用于控制元素的左右平移,平移不会改变原有元素的位置,只是视觉上面的移动。在translate中,样式值可以是像素值也可以是百分比,其百分比对应自己的宽度和高度。
  translateX用于控制元素的左右平移,正值向右,负值向左;translateY用于控制元素的上下平移,正值向下,负值向上。

//ex:
transform:translateX(30px);
transform:translateY(30px);

  同样,translateX和translateY也有缩写,为translate。和scale不同的是,当translate里面只有一个值的时候,只会影响translateX,并不会影响translateY。

//ex:
transform:translate(x,y);
transform:translate(xy);

3. 旋转样式(rotate)

  在CSS3中,用rotate来实现元素旋转的效果,样式值的取值的单位为deg(度)。当取值为正的时候,元素会顺时针方向旋转,当取值为负值的时候,元素会逆时针方向旋转。

//ex:
transform:rotate(30deg);
transform:rotae(-30deg);

4. 倾斜扭曲样式(skew)

  skew用于设置元素的倾斜扭曲样式,也有skewX和skewY两个表示,样式值的单位同样为deg。
缩写样式为skw(x,y);

//ex:
transform:skewX(30deg);
transform:skewX(-30deg);
transform:skew(30deg,30deg);

5. 变形样式的中心点(transform-origin)

  transform-origin用于设置变形样式的元素中心点,当我们设置后,元素的变形样式会围绕着这个点进行变形。当不设置变形样式中心点的时候,元素会按照元素的中心点进行变形。transform-origin的取样值可以是英文单词(如:left top),也可以是像素值(100px 100px)、百分比;


单词组用法:
在这里插入图片描述

像素值:
在这里插入图片描述

6. 3D旋转(rotateX和rotateY)

  在变形样式中平面旋转是rotate,3D旋转是rotateXrotateYrotateX是以X轴为轴进行旋转,rotateY是以Y轴为轴进行旋转,这个和scale(缩放)不同。

transform:rotateX(30deg);
transform:rotateY(30deg);

7、景深样式

  景深样式在CSS中为perspective,景深样式也是CSS 3D样式中非常重要的一个样式。
  perspective属性指是元素的Z平面距离用户之间的距离。浏览器通过该距离来计算用户的视角大小,从而制造出近大远小的3D效果。它的属性值是数字(取正数)加上px。

transform:perspective(800px);

8. 平移Z轴

  translateZ在CSS3样式中用于Z轴的平移,和translateXtranslateY一样,只不过translateZ是沿着Z轴进行平移,效果更像是放大和缩小,但是和scale还不相同。
  当我们对元素不设置3D效果的时候,我们添加translateZ不会有任何效果,所以在对元素需要使用3D效果的时候,我们可以使用transform-style:preserve-3d,让元素在一个3D的状态。

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

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

相关文章

【web安全】CSRF漏洞攻击与防御

前言 总结,仅供学习。 csrf的理解 我们了解一个网站有修改信息,密码,添加删除管理,支付转账的功能之后。 通过抓包抓取对方修改操作的数据包样式, 然后在自己网站搭建一个指令。 当别人来访时, 如果…

linux用户管理_用户和组

2 用户管理 2.1 用户和组的基本概念和作用 2.1.1 账户实质 账户实质就是一个用户在系统上的标识,系统依据账户ID来区分每个用户的文件、进程、任务,给每个用户提供特定的工作关键(如用户的工作目录、SHELL版本以及环境配置等)&…

字符串函数精讲1

又是好几天没有更新了,最近有些忙,但这并不是理由,还是怪我自己玩的时间多了!但还是有在每天敲代码的!话不多说,开始这一期的学习: strlen的使用和模拟实现 • 字符串以 \0 作为结束标志&#…

前端:实现二级菜单(二级菜单悬浮在一级菜单左侧)

效果 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, i…

每日一题:LeetCode-283. 移动零

每日一题系列&#xff08;day 08&#xff09; 前言&#xff1a; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f308; &#x1f50e…

聚观早报 |亚马逊AWS发布新AI芯片;拼多多Q3营收增长94%

【聚观365】11月30日消息 亚马逊AWS发布新AI芯片 拼多多Q3营收增长94% Redmi K70全新国风配色揭晓 英伟达扩大自动驾驶中国团队 华为nova 12参数细节曝光 亚马逊AWS发布新AI芯片 在美国时间周二举办的Reinvent大会上&#xff0c;亚马逊旗下的云计算部门AWS发布了新的人工…

Docker—更新应用程序

在本部分中&#xff0c;你将更新应用程序和映像。您还将了解如何停止和移除容器。 一、更新源代码 在以下步骤中&#xff0c;当您没有任何待办事项列表项时&#xff0c;您将把“空文本”更改为“您还没有待办事项&#xff01;在上面添加一个&#xff01;” 1、在src/static/…

C#,数值计算——插值和外推,径向基函数插值(RBF_multiquadric)的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class RBF_multiquadric : RBF_fn { private double r02 { get; set; } public RBF_multiquadric(double scale 1.0) { this.r02 Globals.SQR(scale); } publi…

智能客服核心技术——预测会话与答案生成

1.信息检索 2. 句型模板匹配标准问题生成答案 3.根据知识图谱推理得到答案

vue发送请求携带token,拼接url地址下载文件

封装请求 &#xff0c;该请求为普通的get请求 该请求返回值为&#xff1a; 请求成功之后拼接URL地址下载文件 代码块 downTemplateRequest(activeKeys.value).then((res) > {let url http://47.169.168.99:18888/media/${res.data.name};var elink document.createElemen…

ApiSix的docker 容器化部署及使用

⼀&#xff0e;etcd安装 Docekr安装Etcd 环境准备 此处安装&#xff0c;是利⽤下载的 etcd 源⽂件&#xff0c;利⽤ docker build 构建完整镜像&#xff0c;具体操作如下&#xff1a; 1.环境准备 1.1. 新建⽂件夹 在磁盘某个路径下新建⼀个⽂件夹&#xff0c;⽤处操作 Dockerfi…

Linux系统平均负载

我们经常会使用 top 命令来查看系统的性能情况&#xff0c;在 top 命令的第一行可以看到 load average 这个数据&#xff0c;如下图所示&#xff1a; load average 包含 3 列&#xff0c;分别表示 1 分钟、5 分钟和 15 分钟的 系统平均负载 系统平均负载&#xff1a; 如果将 …

golang—kafka架构原理快速入门以及自测环境搭建(docker单节点部署)

kafka Apache Kafka 是一个分布式的流处理平台。它具有以下特点&#xff1a; 支持消息的发布和订阅&#xff0c;类似于 RabbtMQ、ActiveMQ 等消息队列支持数据实时处理能保证消息的可靠性投递支持消息的持久化存储&#xff0c;并通过多副本分布式的存储方案来保证消息的容错高…

Java中xml映射文件是干什么的

Java中的XML映射文件主要用于将Java对象与XML文档之间进行转换。它通常用于处理数据交换和存储&#xff0c;例如将Java对象转换为XML格式以便在网络上传输或保存到文件中&#xff0c;或者将XML文档解析为Java对象以进行处理。这种转换可以通过Java的JAXB&#xff08;Java Archi…

springMVC实验(二)—调式工具APIFOX的使用

【知识要点】 后端开发调试工具 前后端分离已经成为互联网类软件开发主流模式&#xff0c;没有前端操作的支持&#xff0c;如何调试后端程序的就是开发人员必须解决的问题。如&#xff1a;get类请求可以直接使用浏览器就能模拟测试&#xff0c;但是post、put等类型的请求&…

Ubuntu 环境下 NFS 服务安装及配置使用

需求&#xff1a;公司内部有多台物理服务器&#xff0c;需要A服务器上的文件让B服务器访问&#xff0c;也就是两台服务器共享文件&#xff0c;当然也可以对A服务器上的文件做权限管理&#xff0c;让B服务器只读或者可读可写 1、NFS 介绍 NFS 是 Network FileSystem 的缩写&…

可以在电脑桌面展示工作计划表的软件

很多上班族都表示自己在工作时&#xff0c;会面临大量且复杂的工作任务&#xff0c;这时候就会拖延工作&#xff0c;或者感觉时间不够用&#xff0c;所以需要有明确的工作计划来指导自己如何分类时间和精力&#xff0c;确保每项工作任务都能够按时完成。如果需要制定每天的工作…

C++学习之路(十二)C++ 用Qt5实现一个工具箱(增加一个XML文本格式化功能)- 示例代码拆分讲解

上篇文章&#xff0c;我们用 Qt5 实现了在小工具箱中添加了《进制转换器功能》功能。为了继续丰富我们的工具箱&#xff0c;今天我们就再增加一个平时经常用到的功能吧&#xff0c;就是「 XML文本格式化 」功能。下面我们就来看看如何来规划开发一个这样的小功能并且添加到我们…

模拟算法【1】

文章目录 &#x1f600;1576. 替换所有的问号&#x1f606;题目&#x1f929;算法原理&#x1f642;代码实现 &#x1f60a;495.提莫攻击&#x1fae0;题目&#x1f609;算法原理&#x1f917;代码实现 模拟算法 通俗的来说&#xff0c;模拟算法就是依葫芦画瓢&#xff0c;将题…

React 签字手写签名组件 react-signature

安装依赖包 npm install uiw/react-signature示例代码 import React, { useRef } from "react"; import Signature from uiw/react-signature;export default function App() {const $svg useRef(null);const handle (evn) > $svg.current?.clear();return (…