![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 63
蚂蚁上的大象
一个大龄的前端渣渣
展开
-
CSS color-mix() 函数
color-mix() 是一个即将推出的 CSS 颜色函数,它能够根据指定的颜色模型(如 RGB、HSL 或 Lab)对两个或多个颜色进行混合。mix-color: 想要混合到背景颜色上的颜色。background-color: 背景色,即混合的基准颜色。[weight](可选): 一个介于0到1之间的数字,表示混合色的比例,默认值为 50%(即0.5)。当 weight 更接近 0 时,混合结果更接近 background-color;反之,更接近 mix-color。例如:body {原创 2024-03-22 14:02:22 · 842 阅读 · 0 评论 -
美不可言的CSS 三
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。内发光注意到box-shadow还有个inset,用于盒子内部发光利用这个特性我们可以在盒子内部的某个范围内设定颜色,做出一个新月形再加点动画和滤镜效果,“猩红之月”闪亮登场!注意到它散发着淡淡的红光,其实就是2个伪元素应用了模糊滤镜所产生的效果本demo地址:Crimson Crescent Loadingtext-shadow文本阴影,本质上和box-sh...转载 2020-11-06 15:05:31 · 336 阅读 · 0 评论 -
美不可言的CSS 二
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽,万变不离其宗。交错动画有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢?很简单,既然它们都是同一时刻开始运动的,那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢?注意到CSS动画有延迟(delay)这一属性。举个栗子,比如有十个元素播放十个动画,将第二个元素的动画播放时间设定为比第一个元素晚0.5秒(也就...转载 2020-11-06 15:00:04 · 219 阅读 · 0 评论 -
美不可言的CSS 一
3D 方块如何在 CSS 中创建立体的方块呢?用以下的 SCSS mixin 即可方块的长度、高度、深度都可以通过 CSS 变量自由调节@mixin cube($width, $height, $depth) { &__front { @include cube-front($width, $height, $depth); } &__back { @include cube-back($width, $height, $depth); }转载 2020-11-06 14:53:42 · 252 阅读 · 0 评论 -
CSS 修改滚动条样式、信封边框样式
CSS 全局修改滚动条样式::-webkit-scrollbar { /*滚动条整体样式*/ width : 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 1px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 4px; /*box-shadow : inset 0 0 2...原创 2019-12-23 17:10:01 · 854 阅读 · 0 评论 -
你未必知道的CSS知识点
需要说明的是,创建复杂特效非我本意,其中大部分都是一两个div就能实现的效果。主要目的是演示渐变、阴影、变换、动画等知识的综合应用。知识点篇01.????CSS计数器的使用演示地址:codepen02.????文本缩进,块级用text-indent,内联用margin-left03.????美化表格常用技巧。等比、定宽、错色等演示地址:codepen...转载 2019-10-16 17:50:41 · 330 阅读 · 1 评论 -
css实现卡卷内圆角
在工作中做一些活动类的H5的时候,经常会遇到UI大佬给出的难题,比如卡卷类的上下半圆角,如图:看到这个的时候显示蒙了一下,然后快速想出了解决办法,一个盒子内填充两个伪元素不就解决了吗?事实结果是可以解决,但是阴影加不上去被伪元素覆盖,代码过于耦合。于是通过查阅资料,在《CSS揭秘》书中找到了一种解决方案,可以实现两个挖空半圆的效果;但又发现一个问题————不能加阴影box-...原创 2019-06-13 09:34:01 · 1791 阅读 · 0 评论 -
vue里px转rem,适用于移动端
1.安装lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的,如果安装失败的话推荐用cnpm淘宝镜像安装npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm install lib-flexible --save2.引入lib-flexible在main....转载 2019-08-03 17:18:55 · 300 阅读 · 0 评论