说说你常用的css3属性有哪些?【专栏08】

前端人

共 1310字,需浏览 3分钟

 ·

2021-06-10 11:36

1.CSS3边框:

  • border-radius:CSS3圆角边框。
  • box-shadow:CSS3边框阴影。
  • border-image:CSS3边框图片。

2.CSS3背景:

  • background-size:属性规定背景图片的尺寸。
  • background-origin :属性规定背景图片的定位区域。
  • background-clip:指定背景图片从什么位置开始裁剪

3.CSS3文字效果:

  • text-shadow:在 CSS3 中,text-shadow 可向文本应用阴影。
  • word-wrap :单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行

4.CSS3 2D转换:

  • transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
  • translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标)
transformtranslate(50px,100px
  • rotate():实现元素的旋转效果
transform:rotate(7deg);
  • scale():实现元素的缩放效果
transform:scale(1.1,1.1);
  • skew():实现元素的倾斜效果
transform:skew(10deg,10deg);
  • matrix():方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
transformmatrix(3, 0, 0, 0.5, 0, 0);

clip-path:clip-path里面的polygon功能,我们可以通过它来绘制多边形

-webkit-clip-pathpolygon(0 100%, 50% 0, 100% 100%);

5.CSS3 过渡

transition

transitionwidth 2s;

6.CSS3 动画

animation

animation:myAnimation 5s infinite;

选择器

  • div:nth-last-child(n)
  • div:nth-of-type(n)
  • div:nth-last-of-type(n)
  • div:last-child
  • div:first-of-type
  • div:only-child
  • div:only-of-type
  • div:empty
  • div:checked
  • div:enabled
  • div:disabled
  • div::selection
  • div:not(s)

说明

本专栏总共汇总了150道题每道题目答案没有多余扯皮的部分,就是单纯的答案。

每天一到面试题,人人都能冲击30k+,点击↓关注【鬼哥】

当前进度【#007题】,如果你能点赞分享、鬼哥骑自行车也是开心的

浏览 47
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报