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

news/2024/2/29 2:59:13

目录

  • 前言
  • 一、圆角样式(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的状态。


https://www.xjx100.cn/news/3118895.html

相关文章

链式栈基础

一.链式栈的栈顶在哪里? 二.链栈的结构: typedef struct LSNode { int data; struct LSNode* next; }LSNode ,*PLStack; //链栈的节点.由于栈顶在第一个数据节点,所以不需要top指针 三.链式栈的实现: //初始化 void InitStack(PLStack ps) { assert(ps ! NULL); if …

爬虫代理技术与构建本地代理池的实践

爬虫中代理的使用: 什么是代理 代理服务器 代理服务器的作用 就是用来转发请求和响应 在爬虫中为何需要使用代理? 隐藏真实IP地址:当进行爬取时,爬虫程序会发送大量的请求到目标网站。如果每个请求都使用相同的IP地址&#xff…

【Ratis】Grpc.proto文件里定义的一些RPC

一、 总览 Raft的提供了三种类型的RPC。分别如下: RaftClientProtocolService:client与server之间的交互RPC,分为ordered和unordered,一种是有序的异步请求流、一种是无序的异步请求流。RaftServerProtocolService:r…

vuepress-----7、发布在GitHub

# 7、发布在GitHub 在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释): #!/usr/bin/env sh# 确保脚本抛出遇到的错误 set -e# 生成静态文件 npm run docs:build# 进入生成的文件夹 cd docs/.vuepress/dist# 如果是发…

Linux下Docker 离线安装详细步骤,亲测成功

1.离线原因:公司新创不能使用开元linux,使用了一个变种centOS,致使yum被禁 2.步骤: 2.1 下载docker tar包,下载地址:Index of linux/https://download.docker.com/linux/ 2.2 新建自己的软件目录&am…

Stability AI 新发布SDXL Turbo:一款实时文本到图像生成模型

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗?订阅我们的简报,深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同,从行业内部的深度分析和实用指南中受益。不要错过这个机会,成为AI领…

提升SQL语句性能

1 内连接说明 当涉及到多个表的连接查询时,通常使用join关键字。 最常用的连接方式是左连接和内连接。 left join:找到两个表的交集,并包含左表中剩余的数据。 inner join:找到两个表的交集数据。 以下是使用inner join的示例…

《异常检测——从经典算法到深度学习》24 用于单变量时间序列异常检测的端到端基准套件

《异常检测——从经典算法到深度学习》 0 概论1 基于隔离森林的异常检测算法 2 基于LOF的异常检测算法3 基于One-Class SVM的异常检测算法4 基于高斯概率密度异常检测算法5 Opprentice——异常检测经典算法最终篇6 基于重构概率的 VAE 异常检测7 基于条件VAE异常检测8 Donut: …