![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
sakoooo
这个作者很懒,什么都没留下…
展开
-
浏览器层合成与页面渲染优化
浏览器层合成与页面渲染优化原创 2021-06-23 11:13:45 · 132 阅读 · 0 评论 -
2021年你可能不知道的 CSS 特性
2021年你可能不知道的 CSS 特性原创 2021-06-21 17:22:45 · 120 阅读 · 0 评论 -
【css】前端换肤功能方案调研 & css变量换肤实践
场景:应用要做深浅两套主题,内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式。技术栈:vue-cli3 + less + Vant接到需求后,上网调研了几种方案:切换className、切换css文件、使用预处理器(less/sass)变量、css变量等,最终选择的是css变量方案。利用class 命名空间根据主题设置不同的类名,在类名下设置不同样式。优点实现简单,易理解兼容性好缺点易产生css优先级问题,造成代码混乱代码冗余不适用于用户自定义主题的场景de.原创 2020-10-22 21:38:48 · 1279 阅读 · 0 评论 -
用后续兄弟选择器(~)设置元素间隔
场景:设置item间的间隔<div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div&原创 2020-10-10 11:06:12 · 687 阅读 · 0 评论 -
【canvas实现放大镜功能】
效果:代码:<html> <style> .container { padding: 48px; } #canvas1 { position: relative; cursor: pointer; } .modal { position: absolute; border: 1px solid red; display: none; } .acti原创 2020-05-26 20:45:49 · 198 阅读 · 0 评论 -
【css】用两个伪类选择器实现带阴影的对话框
效果:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div{ position:relative; width:300px; height:100px; background-color:yellow; box-shadow: 0px 10px 8px #88888原创 2020-05-14 10:31:41 · 266 阅读 · 0 评论 -
html+css实现一个带遮罩层的滑动抽屉
效果类似antd的Drawer,点击灰色遮罩层可以平滑关闭。import React, { useState } from 'react';import { Button } from 'antd';import styles from './test.less';export default function() { const [v, setV] = useState(false); const [mask, setMask] = useState(false); return原创 2020-05-11 17:04:16 · 1628 阅读 · 0 评论 -
img图片显示样式优化
object-fit有的时候图片的尺寸很不符合展示的尺寸会把图片拉的很难看,object-fit这个css属性可以展示比较好的效果。.example{ width:160px; height:90px; object-fit:cover;}object-fit关键属性object-fit:fill被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高...原创 2020-03-23 10:49:41 · 1346 阅读 · 0 评论 -
【css】文本超出部分省略号显示(单行 & 多行)
场景: 文章标题或其他内容过长时,截断为省略号显示。.box { /* 溢出显示省略号 */ max-width: 40vw; overflow: hidden; // 关键 text-overflow: ellipsis; // 关键 white-space: nowrap; // 关键 &:hover { ...原创 2019-12-03 10:29:39 · 120 阅读 · 0 评论