css
文章平均质量分 76
lydxwj
慢慢踩坑
展开
-
通过CSS控制svg变化
本文介绍使用css魔法控制svg变化,要想实现这一点只需要耐心看下去!svg代码示例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init.原创 2021-07-28 22:45:03 · 3401 阅读 · 0 评论 -
适配 iPhoneX
适配 iPhoneX安全区域安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响。参考文档: Human Interface Guidelines - iPhoneXviewport-fitiOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置三个值:contain: 可视窗口完全包含网页内容,原创 2021-03-21 16:00:46 · 199 阅读 · 0 评论 -
优雅处理图片加载失败
环境:vue2.6.6element-ui2.13.2问题:用户头像图片加载失败,显示异常难看,难看的失败图标。解决:使用element-ui的Avatar组件<template> <el-avatar :src="photoUrl" size="small"> {{ name.substring(0,1) }} </el-avatar></template><script>export default {转载 2020-07-03 15:35:04 · 691 阅读 · 0 评论 -
css实现箭头
边框箭头.arrow1{ position: relative;}.arrow1::after{ content: ''; position: absolute; left: 50%; top: 50%; height: 12px; width: 12px; transform-origin: 25% 25%; border-width: 2px 0 0 2px; border-color: #999; borde转载 2020-05-11 11:54:26 · 608 阅读 · 0 评论 -
样式变量共用于js或者template
环境vue cli4项目stylus (如果使用sass、less,可以类比)步骤创建stylus的变量文件variable.styl$mainBg = rgba(0, 21, 42, 1);$mainWidth = 210px;// 导出变量用于js:export { mainBg: $mainBg; mainWidth: $mainWidth;}j...原创 2020-03-10 20:45:18 · 305 阅读 · 0 评论 -
CSS选择器
选择器示例示例说明CSS.class.intro选择所有class="intro"的元素1#id#firstname选择所有id="firstname"的元素1**选择所有元素2elementp选择所有元素1element,elementdiv,p选择所有元素和元素1element elementdiv p选择...转载 2019-12-15 15:14:21 · 76 阅读 · 0 评论 -
Sass安装失败处理
项目中使用sass的经常会出现安装失败报错,今天安装包出现了两个错误,现在记录下来,以供参考。出现报错很多小白都会一脸懵逼,不知所措。其实仔细看看红色报错信息,很容易找到原因,有时候把报错信息复制下来百度也能找到很好的解决方案。报错原因下载缓慢超时一般解决办法是切换镜像地址,我通常是使用包nrmnpm install -g nrm // 安装nrm ls // 查看镜像地址列表nr...原创 2019-12-06 10:53:23 · 895 阅读 · 0 评论 -
css实现文字超出两行部分显示省略号
css实现文字超出两行部分显示省略号overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; //单行超出部分显示省略号overflow:hidden;text-overflow:ellipsis; white-sp...转载 2018-09-26 23:47:07 · 1855 阅读 · 0 评论 -
2018.1项目小结
2018.1项目小结1.页面中出现放大镜效果此问题出现在iOS系统,长按出现放大镜出现的原因是有input输入框,并且字体较小(用react等构建的项目,切换状态,不是路由显示其他页面时候,在其他页面长按也会出现放大镜),解决办法是字体大于16px,rem单位的16px转化后可能无效2.长按页面出现复制-webkit-user-select: none; 禁止长原创 2018-01-15 23:23:56 · 214 阅读 · 0 评论 -
css问题
2018.1.15 移动端小屏幕不显示图片小屏幕iphone4,5图片未显示,图片是2*10平铺在盒子内,用的rem响应把2X10的图片变成4X10就没有问题了原创 2018-01-15 23:25:25 · 129 阅读 · 0 评论 -
多出一条线
问题:拖拽浏览器变换浏览器宽度,红线时隐时现。.box{ width:640rem; height:100rem; background-image: url("../img/bg.png"); background-size: 640rem 110rem; background-position: bottom left;}响应式rem单位,样式中没有bo原创 2017-10-17 00:00:50 · 395 阅读 · 0 评论