登录 注册

每天 30 秒系列之 CSS

本贴最后更新于 1639 天前，其中的信息可能已经天翻地覆

每天 30 秒系列之 CSS

精选常见交互，帮助您拥有简洁酷炫的站点

布局

视觉

动画

交互

其他

返回总目录

每天 30 秒系列

部分译自

30 Seconds of CSS

  • 30Seconds

    📙 前端知识精选集，包含 HTML、CSS、JavaScript、React、Node、安全等方面，每天仅需 30 秒。

    • 精选常见面试题，帮助您准备下一次面试
    • 精选常见交互，帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段，帮助你获取最佳实践
    • 精选常见代码集，帮助您提高打码效率
    • 整理前端界的最新资讯，邀您一同探索新世界
    488 引用 • 384 回帖 • 8 关注
  • CSS

    CSS（Cascading Style Sheet）“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 550 回帖
51 引用
每天 30 秒系列 • Vanessa
使用 flexbox，创建一个 3 列布局，其中每列占据容器的 col-{n} / 12 比率 • Vanessa
CSS - :hover 样式在移动端的兼容处理 • Vanessa
CSS 视觉 - :is/:matches/:any 选择器 CSS 交互 - 信息提示 CSS 其他 - 自定义变量 CSS 其他 - 计数器 CSS 其他 - Cacl() CSS 交互 - 可切换的开关 CSS 交互 - 相邻兄弟视觉弱化 CSS 交互 - 当鼠标移上或聚焦时弹出菜单 CSS 交互 - 跟踪光标的渐变效果 CSS 交互 - 子元素选中后改变父元素的样式 CSS 交互 - 选不中我 CSS 动画 - 下划线动画 CSS 动画 - 阴影盒子的动画效果 CSS 动画 - 高度变化时的过渡效果 CSS 动画 - 简单的变量 CSS 动画 - 🍩式的旋转 CSS 动画 - 按钮边框动画 CSS 视觉 - 斑马条纹列表 CSS 视觉 - 三角形 CSS 视觉 - 系统字体栈 CSS 视觉 - 带形状的分割线 CSS 视觉 - 重置所有样式 CSS 视觉 - 漂亮的下划线 CSS 视觉 - 对溢出的内容进行渐变 CSS 视觉 - 逃离屏幕 CSS 布局 - 清除浮动 CSS 布局 - 文本截断 CSS 视觉 - :not 选择器 CSS 视觉 - 细而明显的边框 CSS 视觉 - 文本渐变 CSS 视觉 - 全屏 CSS 视觉 - 图片适配 CSS 视觉 - 文本风化效果 CSS 视觉 - 渐变阴影 CSS 视觉 - 自定义文本选中样式 CSS 视觉 - 自定义滚动条 CSS 视觉 - 圆 CSS 布局 - 多行文本截断 CSS 布局 - 最后一个元素占满剩余可用高度 CSS 布局 - 盒子模型居中 CSS 布局 - 平均分配子元素 CSS 布局 - 使用 transform 进行居中 CSS 布局 - 网格居中 CSS 布局 - 垂直小技巧 CSS 布局 - table 居中显示 CSS 布局 - 宽高保持一致 CSS 动画 - 弹跳加载 CSS 布局 - 重置 box-sizing
昆明 位置
1 关注
2 收藏
51 引用
8 回帖
3
3
2
4.0k 315 310 770 787 115 2 410 1.2k

相关帖子

8 回帖
每天 30 秒系列之 CSS

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
  • someone9891 •
    捐赠者

    这么大个社区还不够你交流大吗

  • 其他回帖
  • Vanessa •
    订阅者 付费者 作者

    有什么问题么？

  • someone9891 • • 1 评论
    捐赠者

    借帖子请教一个问题：
    我有部分接口需要跨域访问，我在 springmvc controller 层设置了允许跨域，但是 使用 axios 请求的时候还是不行，提示如下：

    Access to XMLHttpRequest at 'localhost:8082/MetaAppAPI/etl/list' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

    Springmvc 注解如下：

    image.png

    这个有什么办法可以解决吗？

    该回帖因偏离主题而被折叠
    1 操作
    Vanessa 在 2019-07-11 22:15:21 折叠了该回帖
    前端配置一下代理，类似 https://github.com/b3log/pipe/blob/master/console/nuxt.config.js#L59
    Vanessa •
  • someone9891 •
    捐赠者

    是不是只有聪明的人才能看到内容呢？

    1 回复
  • 查看全部回帖
Vanessa
我们终此一生，就是要摆脱他人的期待，找到真正的自己。 昆明
回帖
8930
 帖子
756
 积分
140708