![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 54
c
MINO吖
代码就是一门艺术.
展开
-
CSS 实现新拟态(Neumorphism) UI 风格
什么是新拟态(Neumorphism) UI 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰设计师 Alexander Plyuto 在各平台发布的新作品「Skeuomorph Mobile Banking」原创 2023-11-14 09:25:28 · 760 阅读 · 0 评论 -
如何使用Javascript实现缓动特效
虽然缓动特效这个词你可能没有听说过,但是绝大部分人都使用过。最典型的场景是在实现动画的过程中,无论是早期的jQuery还是CSS3里的transition,都允许你添加一个缓动特效参数,例如 linear, ease-in, ease-out等等。添加参数的效果就是让物体的变化(速度、大小或者颜色)伴随着一定的节奏,可以是均匀的,也可以是由慢至快的。为什么要研究这件事?因为我在使用Unity编写游戏的过程中需要使物体拟真,例如一辆汽车在移动到目标位置时通常是缓慢启动,随之加速,最后缓慢减速。原创 2023-11-02 13:35:39 · 189 阅读 · 0 评论 -
CSS 纵横比属性:aspect-ratio
aspect-ratio纵横比可以用于计算 auto 尺寸以及其他布局函数。原创 2023-09-13 17:44:54 · 664 阅读 · 0 评论 -
Flex布局使最后一行居左
如何解决在使用flex布局时,最后一行没有居左展示,并产生错位的问题?原创 2022-07-10 14:43:49 · 3429 阅读 · 2 评论 -
CSS下镜像翻转(水平/垂直翻转)
css下镜像翻转两种写法:利用css动画属性rotate旋转来实现:.mirrorRotateLevel { transform: rotateY(180deg); /* 水平镜像翻转 */}.mirrorRotateVertical { transform: rotateX(180deg); /* 垂直镜像翻转 */}此处,rotateY(180deg)这里的 Y 表示元素以Y轴镜像翻转,也即水平翻转;同理,rotateX(180deg)表示以X轴为镜像翻...原创 2021-07-06 10:19:03 · 14468 阅读 · 0 评论 -
父元素设置flex:1;子元素内容过程导致被撑开
<div class="box"> <div class="a"></div> <div class="b"></div></div>.box { display: flex;}.b { flex: 1; }.a {width: 100px;}正常两栏布局,但如果b得子元素太宽,会撑开b,导致a的宽度被挤小 将b的宽度设置为width: 0;,就可以解决...转载 2021-05-08 10:28:02 · 2536 阅读 · 0 评论 -
CSS中content可以用到的字符编码
基本形状▲ 9650 25B2 ► 9658 25BA ► 9658 25BA ▼ 9660 25BC◄ 9668 25C4 ❤ 10084 2764 ✈ 9992 2708 ★ 9733 2605✦ 10022 2726 ☀ 9728 2600 ◆ 9670 25C6 ◈ 9672 25C8▣ 9635 25A3标点,特殊符号« 171 00AB » 187 00BB ‹ 139 008B › 155 009B “ 8220 201C ” 8221 201D‘ 8216 201.原创 2020-12-21 09:55:20 · 750 阅读 · 0 评论 -
CSS - media query样式不生效,被划掉
问题:@media only screen and (max-width: 1200px) { .car-list { width: 300px; background-color: white; }}.car-list { width: 350px; height: calc(100vh - 80px); display: flex; flex-direction: column; background-color: #01183f; positi原创 2020-11-09 09:46:20 · 1548 阅读 · 0 评论 -
CSS-使用Flex实现元素以宽高比缩放
问题:元素宽度随着浏览器改变时, 高度仍然保持不变,致使内部图片变形;上下padding的值,相对于最近父级的宽2:flex布局,未设置高的具体值的时候,其值等于子级内容最大的高度3: 伪类,content为空,宽高为0,不占据位置,也不产生多余的标签<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css定宽高比 flex + 伪类 + p原创 2020-08-10 20:23:41 · 2963 阅读 · 0 评论 -
CSS position属性
position的含义是指定位类型,取值类型可以有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新发布的一个属性。1、position: static static(没有定位)是position的默认值,元素处于正常的文档流中,会忽略left、top、right、bottom和z-index属性。2、posit...原创 2020-04-13 20:06:48 · 204 阅读 · 0 评论 -
使用css3的flex盒模型来实现两栏布局(左侧固定宽度,右侧自适应宽度)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;...原创 2020-02-02 10:19:31 · 1021 阅读 · 0 评论 -
安装Sass遇到的问题(2019新)
安装Ruby环境这里安装的是Ruby 2.3.3(x64)安装后,启动命令窗口测试是否成功;安装Sass使用命令:gem install sass报错解决方法解决方法:升级你的SSL证书下载 http://curl.haxx.se/ca/cacert.pem 这里把这个文件保存到D:\Program_Files\Ruby23-x64文件夹下 打...原创 2019-04-28 15:36:51 · 364 阅读 · 0 评论