CSS
CSS
小火车况且况且
这个作者很懒,什么都没留下…
展开
-
CSS如何将浏览器文字设置小于12px
【代码】CSS如何将浏览器文字设置小于12px。原创 2023-08-18 15:36:47 · 620 阅读 · 0 评论 -
使用纯CSS定义变量, 然后全局调用
这里在框架下使用为例子定义好全局的css变量:root 这个 伪类匹配文档树的根元素。对于 来说, 表示 元素,除了优先级更高之外,与 选择器相同。自定义属性 (–*):CSS 变量 带有前缀–的属性名,比如–example–name,表示的是带有值的自定义属性,其可以通过 var 函数在全文档范围内复用的。在中导入这个时候可以看到审查元素中的样式多了刚刚添加的几个变量使用方式, 使用的方式进行导入即可var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、原创 2022-07-09 17:12:15 · 317 阅读 · 1 评论 -
CSS中display:none和visibility: hidden的区别
CSS中display:node和visibility: hidden的区别1. 相同点都是隐藏元素在页面的显示2. 不同点2.1 display:nonedisplay:none隐藏元素之后,该对象彻底在页面不可见,元素的位置也会被下面的元素顶替2.2 visibility: hiddenvisibility: hidden之后,该对象在页面不可见,但是之前的位置还是会被保留...原创 2022-04-02 10:49:25 · 384 阅读 · 0 评论 -
CSS 设置全局的滚动条样式
CSS 设置全局的滚动条样式效果图只需要在全局的样式中添加,导入即可::-webkit-scrollbar { width: 5px; /* 纵向滚动条*/ height: 5px; /* 横向滚动条 */ background-color: #fff;}/*定义滚动条轨道 内阴影*/::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); background-co原创 2020-08-09 19:37:38 · 4565 阅读 · 2 评论 -
Sass 中一些常用的特殊语句
Sass 中一些常用的特殊语句Sass官方文档文章目录Sass 中一些常用的特殊语句1. 基本属性说明1.1 变量 `$`1.2 插值语句 `#{}`2. 定义函数 调用函数1. 基本属性说明1.1 变量 $-最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样 $width : 10px; // 使用 div { width: $width }...原创 2019-11-08 17:36:51 · 242 阅读 · 0 评论 -
CSS 文字超出部分以省略号结尾
CSS 文字超出部分以省略号结尾文字只有一行的时候overflow: hidden;text-overflow: ellipsis;white-space: nowrap;指定多行文字的时候2.1 属性说明display: -webkit-box: 将对象作为弹性伸缩盒子模型显示text-overflow: ellipsis: 溢出部分用省略号代替-webkit-li...原创 2019-11-05 09:22:55 · 1799 阅读 · 0 评论 -
CSS 中 flex 布局最后一行左对齐
CSS 中 flex 布局最后一行左对齐使用 flex 布局的时候 同时使用属性 justify-content: sapce-between 会出现最后一行布局错乱<div class="detail-list"> <div class="list-box"> <image class="list-image" src="{{listItem.im...原创 2019-11-04 15:01:41 · 2112 阅读 · 0 评论 -
CSS 部分属性说明
CSS 部分属性说明1. max-width 和 min-widthmax-width: 规定元素本身最大宽度,即元素本身 (该div) 的宽度应小于等于其最大宽度值min-width: 规定元素本身最小宽度,即元素本身应大于等于其宽度值。...原创 2019-10-28 11:16:56 · 94 阅读 · 0 评论 -
CSS 中使用动画效果实现点赞特效
CSS 中使用动画效果实现点赞特效效果图当没有点赞的时候, 页面上只有的图标是黑色的点赞之后, 出现一个缓缓上升的红心赞, 之后页面上的赞变为取消, 图标变为红色缓缓上升的红心赞会左右摇摆----------------- 页面的逻辑处理使用 Vue 完成------------------html代码<template> <div class="Cli...原创 2019-10-23 11:32:04 · 7323 阅读 · 0 评论 -
CSS 中鼠标悬停 图片旋转
CSS 中鼠标悬停 图片旋转W3C 中 transfrom 说明主要使用的属性就是 transfrom第一种情况1.1 说明 当鼠标放到图片上之后 图片旋转, 这里的图片给的是背景图1.2 代码说明:transform: rotate(angle) 指定元素的 2D 旋转transition: all 0.6s 设定旋转的动画时间<div class="...原创 2019-10-22 15:49:02 · 6351 阅读 · 0 评论