随笔分类 - CSS

css常见布局

摘要：两列布局 1、flex 2、float 3、position: absolute 三列布局 1、flex 2、float(圣杯布局，双飞翼布局) 3、position: absolute 圣杯布局 1、注意html结构是 main-> left -> right 把重要的内容放在前面，有利于seo 阅读全文

posted @ 2024-09-04 19:23 每天不emo 阅读(361) 评论(0) 推荐(0) 编辑

常用css总结

摘要：多行省略号 1、单行 .line-1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 2、多行 .line-3 { display: -webkit-box; -webkit-box-orient: vertic 阅读全文

posted @ 2024-01-08 22:02 每天不emo 阅读(10) 评论(0) 推荐(0) 编辑

css形状

摘要：自适应的椭圆椭圆 border-radius: 50%; 二分之一椭圆 border-radius: 100% 0 0 100%/50%; 四分之一椭圆 border-radius: 100% 0 0 0; 关于border-radius的解释，语法：水平切角/垂直切角，水平切角和垂直切角里都有四阅读全文

posted @ 2023-02-25 22:29 每天不emo 阅读(17) 评论(0) 推荐(0) 编辑

css视觉效果

摘要：单侧投影 box-shadow: x方向偏移 y方向偏移模糊半径扩张半径颜色内投影/外投影单侧投影 box-shadow: 0 5px 4px -4px black; // 扩张半径=-模糊半径邻边投影 box-shadow: 5px 5px 10px -5px black; // 扩张阅读全文

posted @ 2023-02-25 22:28 每天不emo 阅读(24) 评论(0) 推荐(0) 编辑

css动画效果

摘要：缓动动画小球下落效果 @keyframes bounce { 60%, 80%, 100% { transform: translateY(80px); animation-timing-function: cubic-bezier(.215, .61, .355, 1); } 70% { tra 阅读全文

posted @ 2023-02-25 22:27 每天不emo 阅读(83) 评论(0) 推荐(0) 编辑

css用户体验

摘要：选择适合的鼠标光标禁用光标 cursor: not-allowed; 隐藏光标 cursor: url('transparent.gif'); cursor: none; 扩大可点击区域伪元素： button { position: relative; } button::before { co 阅读全文

posted @ 2023-02-25 22:23 每天不emo 阅读(16) 评论(0) 推荐(0) 编辑

css背景与边框

摘要：背景侵入边框问题 background-clip: padding-box; background-clip的属性有content-box、padding-box、border-box, text, 默认为border-box,所以背景会侵入边框，改为padding-box,背景会裁剪到paddin 阅读全文

posted @ 2023-02-25 22:19 每天不emo 阅读(103) 评论(0) 推荐(0) 编辑