首页 前端知识 CSS3样式详解之圆角、阴影及变形

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

2024-05-29 10:05:07 前端知识 前端哥 761 534 我要收藏

目录

  • 前言
  • 一、圆角样式(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.qianduange.cn//article/9903.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!