前端 CSS 经典:省略号

1. 单行省略 .ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ...

前端 CSS 经典:clip、clip-path

1. clip 1.1 clip: auto | inherit | rect auto:默认,不裁剪 inherit:继承父级 clip 属性 rect:规则四边形裁剪 1.2 clip: rect(top, right, bottom, left) 注意: 1.裁剪只对 fixed 和 abso...

CSS 快速掌握

49 课时 |
19529 人已学 |
免费

零基础学前端HTML+CSS

57 课时 |
8924 人已学 |
免费

前端开发CSS基础

21 课时 |
4255 人已学 |
免费
开发者课程背景图

前端 CSS 经典:box-shadow

1. 基础属性 /* box-shadow: h-shadow v-shadow blur spread color inset; */ box-shadow: 10px 10px 2px 2px red inset; ...

前端 css 经典:选择器速记

1. 牢记 /* 元素选择器 */ div {} /* 类选择器 */ .box {} /* ID 选择器 */ #id {} /* 通配符 */ * {} /* 群组选择 */ div, span {} /* 后代选择 */ div span {} /* 子代选择 */ div &g...

前端 css 经典:grid 栅格布局

前言:flex 是一维布局、grid 是二维布局 1. 容器属性 .container { width: 500px; height: 500px; /* 容器的类型为块元素grid还是行内元素inline-grid */ display: grid; bo...

前端 css 经典:transition 过渡和 animation 动画

1. transition 过渡动画 给 dom 元素添加变形、变形的过程添加动画 /* 元素变形种类 2D */ /* 移动:translate(100px, 100px) 水平和垂直方向各移动100px。*/ /* 旋转:rotate(60deg) 顺时针旋转60度 */ ...

【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享

【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享

0% { clip-path: inset(0 0 0 0); } 5% { clip-path: inset(.4em 0 .8em 0); } 10% { clip-path: inset(.8em 0 .4em 0); } 15% { clip-path: inset(1em 0 .1em 0...

CSS3 转换,深入理解Flutter动画原理,前端基础图形

CSS3 转换,深入理解Flutter动画原理,前端基础图形

height: 100px; border: 1px solid red; background-color: #cccccc; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } ...

打包后的前端模块是一个单独的文件吗?可不可以单独生成html,css,js之类的分类文件夹?

打包后的前端模块是一个单独的文件吗?可不可以单独生成html,css,js之类的分类文件夹?这样的话和后端整合起来会比较方便一点

web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale

html scaleMDN CSS函数scale()用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素,同时可以在不同的方向设置不同的缩放值。:not()MDN :not()是CSS的伪类,用来匹...

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

社区圈子

开发与运维
开发与运维
集结各类场景实战经验,助你开发运维畅行无忧
6420+人已加入
加入
相关电子书
更多
零基础CSS入门教程
立即下载