CSS
文章平均质量分 78
妙趣前端
学生
展开
-
一款支持vue3 的颜色选择器
一款支持vue3 的颜色选择器npm 地址特点简单易用,UI在原插件基础上优化增加了圆角和过渡动画提供以 npm 的形式安装提供全局组件在支持 html5 input[type=‘color’] 的浏览器实现了「更多颜色」的功能安装npm i colorpicker-v3使用在main中注册组件在 main.js 文件中引入插件并注册import { createApp } from 'vue'import App from './App.vue'import ColorP原创 2022-01-29 12:14:39 · 5285 阅读 · 4 评论 -
浏览器调试技巧
浏览器调试技巧修改CSS技巧原CSS原创 2022-01-19 16:15:26 · 729 阅读 · 0 评论 -
前端基础篇之 CSS 世界
前端基础篇之 CSS 世界基本概念这些基本概念有些可能不易理解但却都很重要,如果看完还是很不理解的话需要自己谷歌或百度,网上关于这些概念的文章不少。流“流”又叫文档流,是 css 的一种基本定位和布局机制。流是 html 的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是 html 默认的布局机制,如你写的 html 不用 css,默认自上而下(块级元素如div)从左到右(内联元素如span)堆砌的布局方式。块级元素和内联元素这个大家肯定都知道。块级元素是指单独撑满一行原创 2021-10-15 08:18:08 · 1189 阅读 · 1 评论 -
大前端介绍
前端简单来说,大前端就是所有前端的统称,比如Android、iOS、web、Watch等,最接近用户的那一层也就是UI层,然后将其统一起来,就是大前端。大前端最大的特点在于一次开发,同时适用于所有平台,开发者不用为一个APP需要做Android和iOS两种模式而担心。大前端是web统一的时代,利用web不仅能开发出网站,更可以开发手机端web应用和移动端应用程序。为什么出现大前端由于node的出现,前端工程师不需要依赖于后端程序而直接运行,从而前后端分离起来。所以当开发一个新产品的时候服务只需要原创 2021-09-11 23:27:42 · 6472 阅读 · 1 评论 -
神奇的伪类选择器focus-within
作者: 晴栀Sunset良辰难再,人生中大好时刻,不要再去旧梦重圆。公众号链接:神奇的focus-within文章目录神奇的伪类选择器focus-within:focus-within 的冒泡性举个例子冒泡案例感知用户的点击事件案例一案例二配合 `:placeholder-shown `伪类实现表单效果兼容性案例综合案例导航总结神奇的伪类选择器focus-within:focus-within是一个CSS 伪类 ,表示一个元素获得焦点,或,该元素的后代元素获得焦点。换句话说,元.原创 2021-01-23 00:44:04 · 590 阅读 · 1 评论 -
太惊艳了,这些都是css的杰作
作者: 晴栀珍惜拥有的每一天,拥抱生命里的每一个瞬间。莫到日历沙沙划去了岁月,莫到钟摆悠悠摇老了容颜。不要一眨眼,芳华岁月都已成过往之事。才发现,时光匆匆逝去光阴真如箭。文章目录有趣的css动画使用 border-image 实现渐变边框使用 border-image 实现渐变边框实现代码如下border-radius 失效代码如下缺点background-image + 伪元素使用 background-clip 实现缺点border-image + overflow: hiddenborder-.原创 2021-01-22 00:16:42 · 571 阅读 · 0 评论 -
css新特性
作者: 晴栀Sunset时间论钟头,日子论盼头,生命有尽头,命运有想头。惜时有紧头,干事不怵头,拼搏有劲头,坚持走到头。愿君把握好年头,惜时记心头,努力奔前头,好运没有头。文章目录css新特性背景边框文本效果渐变线性渐变径向渐变2D转换3D转换过渡动画定义动画集调用动画集多媒体查询媒体查询的定义媒体查询的使用Flex布局定义基本概念容器的属性项目的属性实例css新特性背景CSS3更新了几个新的背景属性用来控制背景元素background-origin: 规定背景图片的定位区域,..原创 2021-01-21 09:16:07 · 262 阅读 · 1 评论 -
CSS实现平行四边形
作者:晴栀Sunset平行四边形文章目录平行四边形背景知识难题嵌套元素方案伪元素方案总结时间有三种步伐:未来姗姗来迟,现在象箭一样飞逝,过去永远静止不动。背景知识基本的 CSS 变形难题平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。在视觉设计中,平行四边形往往可以传达出一种动感。让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就是一个普通的块状按钮,辅以一些简单的样式,如图 3-13 所示。然后,我们可以通过skew() ..原创 2021-01-21 00:53:58 · 26829 阅读 · 7 评论 -
灵魂按钮
灵魂按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @import url原创 2021-01-21 00:52:38 · 151 阅读 · 0 评论 -
学习累了来点好玩的
学习累了来点好玩的鼠标hover效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>♥</title> <style> h原创 2021-01-20 21:46:08 · 115 阅读 · 0 评论 -
条纹背景
条纹背景文章目录条纹背景条纹背景背景知识难题解决方案垂直条纹linear-gradient()斜向条纹更好的斜向条纹repeating-linear-gradient() 和 repeating-radial-gradient()灵活的同色系条纹总结我以为世间最可宝贵的就是“今”,最易丧失的也是“今”。因为它最容易丧失,所以更觉得它宝贵。条纹背景背景知识CSS 线性渐变,background-sizecss渐变https://www.w3.org/TR/css-images-3/#原创 2021-01-19 16:17:52 · 401 阅读 · 0 评论 -
边框内圆角
边框内圆角文章目录边框内圆角背景知识问题解决方法注意点总结不要老叹息过去,它是不再回来的;要明智地改善现在。要以不忧不惧的坚决意志投入扑朔迷离的未来。背景知识box-shadow,outline,“多重边框”有时我们需要一个容器,只在内侧有圆角,而边框或描边的四个角在外部仍然保持直角的形状,如图 2-15 所示。这是一个有趣的效果,目前还没有被滥用。用两个元素可以实现这个效果,这并没有什么特别的:<style>.something-meaningful { ba原创 2021-01-19 00:12:52 · 456 阅读 · 0 评论 -
透明边框
文章目录透明边框问题举例解决方案测试总结透明边框相信你以前肯定尝试过 CSS 中的半透明颜色,比如 rgba()和hsla()。半透明颜色是 2009 年发生的一场重大变革。从那以后,我们终于可以在网页设计中使用它们了,但是为了尝鲜还需要付出额外的代价。比如说,我们需要做好回退,加载 shim 脚本,甚至在 IE 下还需要用到恶心的滤镜来hack。尽管半透明颜色很受欢迎,但人们对它的使用基本上还是集中在背景上的。这里面有一些原因。问题假设我们想给一个容器设置一层白色背景和一道半透明白色边框,b原创 2021-01-18 22:50:28 · 1106 阅读 · 5 评论 -
实现文字环绕
实现文字环绕要想让文字环绕在图片的周围,让图片 float 就可以了;如果还想要实现文字圆形环绕图片的效果,可以使用 shape-outside: circle(); 属性。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-01-18 00:24:50 · 1139 阅读 · 2 评论 -
多重边框
实现多重边框背景知识box-shadow 的基本用法难题回首往事,当背景与边框(第三版)(http://w3.org/TR/css3-background)还在草案阶段时,CSS 工作组内部有过很多讨论,关于是否应该允许多重边框,就像多重背景那样。不幸的是,当时一致认为这个特性并没有足够多的使用场景,而且网页开发者还可以使用 border-image 来达到相同的效果。然而工作组忽略了一点:我们通常希望在 CSS 代码层面以更灵活的方式来调整边框样式。因此,网页开发者们最终不得不折腾出各种原创 2021-01-17 23:33:32 · 414 阅读 · 1 评论 -
3行核心CSS代码的rate评分组件,秀到你怀疑人生
3行核心CSS代码的rate评分组件,秀到你怀疑人生文章目录3行核心CSS代码的rate评分组件,秀到你怀疑人生原理代码基本布局先把默认的星星显示出来实现选中单个星星实现连同兄弟元素一起高亮然后把input反向排列鼠标移入预览选中效果加入放大动画总结用css实现一个rate评分 ❗ 核心代码也就三行,效果如下:原理梳理如下:去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库]、;借用5个radio单选框,把默认样式都去掉,显示默认的星星;用checked伪类监听用户选原创 2021-01-10 20:06:54 · 185 阅读 · 2 评论 -
关于 z-index,你可能一直存在误区
关于 z-index,你可能一直存在误区z-index 这个属性表面看上去很简单,但如果你想搞清楚其工作原理的话,其实是有不少值得探讨之处的。本文将从层叠上下文(stacking contexts)和一些实际案例出发,谈一谈 z-index 的内部工作原理。CSS 为盒模型的布局提供了三种不同的定位方案[1] :正常文档流浮动定位最后一种方案(特指绝对定位)将会把元素从正常文档流中完全移走,其最终的落脚点将取决于开发者。通过设置 top,left,bottom 和 right 的值,你可以原创 2020-11-06 23:04:22 · 1516 阅读 · 1 评论 -
前端必看的 8 个 HTML+CSS 技巧
文章目录前端必看的 8 个 HTML+CSS 技巧1. 固定底部内容2. 悬停放大图片特效3. 瞬间黑暗模式???? Darkmode.js4. 自定义列表符号5. 图片视差效果仅使用CSS使用CSS + JavaScript6. 裁剪图像的动画7. 混合模式(Blend)8. 瀑布流布局总结前端必看的 8 个 HTML+CSS 技巧点赞是动力 ????,关注是支持 ????!建议、疑问、话题欢迎在评论区留言哦!CSS是一个很独特的语言。看起来非常简单,但是某种特殊效果看似简单,实现起来就颇转载 2020-08-22 12:58:28 · 621 阅读 · 0 评论 -
44 关学习 CSS 与 CSS3 基础「一」
44 关学习 CSS 与 CSS3 基础「一」「前言」欢迎回来三钻的FCC前端教程,上一篇文章我们通过28关学会了HTML与HTML5网页开发基础。这一期我们一起攻破前端第二大知识点《CSS基础入门》。因为这一课一共有44关,我把文章分成两期更新。敬请期待!「CSS基础知识」Cascading Style Sheet缩写为CSS,顾名思义就是层叠样式表的意思。CSS是HTML中的一个样式表,告诉浏览器网页上的文字和其他内容是如何展示的。理解CSS以上是一个官方的定义。我们用一个更简单的原创 2020-08-22 11:45:44 · 171 阅读 · 0 评论 -
给你一份详细的CSS布局指南,请查收
欢迎相互交流学习文章目录前言1. 居中相关的布局1.1 水平居中布局方案一. inline-block + text-align方案二. 定位 + transform方案三. display: block + margin: 0 auto1.2 垂直居中布局方案一. 定位 + transform方案二. display: table-cell + vertical-align1.3 水平垂直...原创 2020-04-18 17:41:31 · 878 阅读 · 0 评论 -
最全的CSS渐变解析
文章目录最全的CSS渐变解析线性渐变实现发廊图光斑动画径向渐变默认均匀分布不均匀分布改变渐变的形状渐变形状的大小改变圆心后记最全的CSS渐变解析线性渐变为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。-默认从上到下发生渐变 line...原创 2020-04-18 16:07:57 · 1147 阅读 · 0 评论 -
你真的了解CSS包含块么?
我所了解的CSS包含块包含块有什么作用呢?下文接下来带你知晓↓↓↓↓↓↓↓文章目录我所了解的CSS包含块指出错误观念什么是包含块?根元素包含块其他元素的包含块如何确定元素的包含块?元素包含块的作用?下面看些例子示例一示例二示例三示例四示例五后记指出错误观念许多开发者认为一个元素的包含块就是他的父元素的内容区,其实这是错误的(至少不完全正确)!一个元素的尺寸和位置经常受其包含块...原创 2020-04-18 07:22:26 · 996 阅读 · 1 评论 -
CSS3笔记-选择器
CSS 选择器CSS3 选择器规范地址: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/CSS3 选择最新选择器规范: https://www.w3.org/TR/selectors!—问题—!1.css 的全称是什么?cascading style sheets ;2.样式表的组成 a .样式表b. 规则c. ...原创 2020-04-17 11:35:02 · 235 阅读 · 0 评论 -
CSS选择器
CSS选择器CSS3选择器规范地址: https://www.w3.org/TR/2011/REC-css3-selectors-20110929/CSS3选择最新选择器规范: https://www.w3.org/TR/selectors!—问题—!1.css的全称是什么?2.样式表的组成3.浏览器读取编译css的顺序?1.基本选择器 /*通配符选择器*/ * { ma...原创 2020-04-14 21:14:36 · 679 阅读 · 0 评论 -
史上最全的CSS样式实现,提升你的效率
文章目录55个提高你CSS开发效率的必备片段清除浮动垂直水平居中绝对定位方式且已知宽高绝对定位 + 未知宽高 + translateflex 轻松搞定水平垂直居中(未知宽高)文本末尾添加省略号宽度固定,适合单行显示...宽度不固定,适合多行以及移动端显示制造文本的模糊效果动画实现简洁 loading 效果自定义文本选中样式顶角贴纸效果input 占位符移动端可点击元素去处默认边框小三角鼠标手型...原创 2020-04-03 16:01:51 · 448 阅读 · 0 评论