说说你常用的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 坐标)
transform:translate(50px,100px)
rotate():实现元素的旋转效果
transform:rotate(7deg);
scale():实现元素的缩放效果
transform:scale(1.1,1.1);
skew():实现元素的倾斜效果
transform:skew(10deg,10deg);
matrix():方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
transform: matrix(3, 0, 0, 0.5, 0, 0);
clip-path:clip-path里面的polygon功能,我们可以通过它来绘制多边形
-webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%);
5.CSS3 过渡
transition
transition: width 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题】,如果你能点赞分享、鬼哥骑自行车也是开心的
评论