css
关注
分享
扫一扫
sakoooo
这个作者很懒，什么都没留下…
展开
-
浏览器层合成与页面渲染优化
浏览器层合成与页面渲染优化原创 2021-06-23 11:13:45 · 167 阅读 · 0 评论 -
2021年你可能不知道的 CSS 特性
2021年你可能不知道的 CSS 特性原创 2021-06-21 17:22:45 · 156 阅读 · 0 评论 -
【css】前端换肤功能方案调研 & css变量换肤实践
场景：应用要做深浅两套主题，内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式。技术栈：vue-cli3 + less + Vant接到需求后，上网调研了几种方案：切换className、切换css文件、使用预处理器（less/sass）变量、css变量等，最终选择的是css变量方案。利用class 命名空间根据主题设置不同的类名，在类名下设置不同样式。优点实现简单，易理解兼容性好缺点易产生css优先级问题，造成代码混乱代码冗余不适用于用户自定义主题的场景de.原创 2020-10-22 21:38:48 · 1375 阅读 · 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 · 744 阅读 · 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 · 242 阅读 · 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 · 323 阅读 · 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 · 1703 阅读 · 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 · 1382 阅读 · 0 评论 -
【css】文本超出部分省略号显示（单行 & 多行）
场景： 文章标题或其他内容过长时，截断为省略号显示。.box { /* 溢出显示省略号 */ max-width: 40vw; overflow: hidden; // 关键 text-overflow: ellipsis; // 关键 white-space: nowrap; // 关键 &:hover { ...原创 2019-12-03 10:29:39 · 140 阅读 · 0 评论