![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
hst❀
前端踩坑记录/速查本/不定期更新
展开
-
css 记录font-weight在谷歌浏览器中的表现
1.font-weight: 100|200|3002.font-weight: 400|5003.font-weight: 600|7004.font-weight: 400text-shadow: 0 0 0 #000;原创 2021-08-25 10:14:55 · 505 阅读 · 0 评论 -
移动端 css通用样式表
@charset "utf-8";html { font-family: "Helvetica Neue",Helvetica, sans-serif; /*谷歌浏览器字体最小字体12px*/ -webkit-text-size-adjust: 100%;/*100%/none 关闭字体大小自动调整功能*/ /*a标签及拥有 :active伪类的元素有默认的高亮框*/ -webkit-tap-hightlight-color: transparent; /*原创 2020-08-17 11:42:01 · 992 阅读 · 0 评论 -
简单记录一下 Sass/Scss 和 Less 的区别
一、Sass/Scss、Less是什么?Sass (Syntactically Awesome Stylesheets)是一种动态样式语言,Sass语法属于缩排语法,使用 “缩进” 代替 “花括号” 表示属性属于某个选择器,用 “换行” 代替 “分号” 分隔属性。比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。Less也是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量,继承,运算, 函数. Less 既可以在客户端上运行 (支持IE 6+原创 2020-08-17 10:22:49 · 379 阅读 · 0 评论 -
vue 中使用scss, 报错 Module build failed: TypeError: loaderContext.getResolve is not a function
使用步骤:1.打开终端,安装sass依赖包npm install --save-dev sass-loader //sass-loader依赖于node-sassnpm install --save-dev node-sass2.在build文件夹下的webpack.base.conf.js的rules里面添加以下配置{ test: /\.scss$/, loaders: ["style", "css", "sass"]}3.修改 style标签 lang=“scss”, 启原创 2020-08-17 10:03:00 · 533 阅读 · 0 评论 -
CSS3实现缺角矩形,缺角边框以及折角矩形
项目中经常用到不规则的背景或边框,最直接的解决方案是通过切图或用伪类before、after遮挡,但是这两种方法都有弊端,索性花时间整理学习一下更好的解决方案,方便取用。本文主要介绍通过背景渐变和clip-path实现,伪类实现的方法不再赘述。一、缺角矩形使用css3渐变实现缺角矩形,linear-gradient相关属性介绍移步官网。<div class="box"></div><style> .box{ width: 100px.原创 2020-08-07 15:29:45 · 11287 阅读 · 1 评论 -
css3 背景渐变色实现过渡效果
对于设了渐变颜色的background,css会当做背景图片处理,这时直接设过渡transition会没有效果;整理了两种用过的,给渐变背景加过渡的方法:方法一:利用background-position,通过改变背景位置实现过渡<div class="btn"></div>.btn{ background: linear-gradient(72deg,rgba(5,120,255,1) 0%,rgba(0,177,255,1) 50%,rgba(0,177,255,原创 2020-07-23 16:08:17 · 3934 阅读 · 0 评论 -
rem 自适应屏幕解决方案
1.使用的长度单位rem、vwrem这个单位代表根元素的 font-size大小(一般来说是html元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值。vw1vw就是屏幕宽度的百分之一,窗口放大或缩小1vw的值也会变化。2.使用方法假设UI设计稿的宽度是1920px,html的font-size想要设置为20px,设以rem为单位font-size...转载 2020-01-20 09:41:48 · 571 阅读 · 0 评论 -
vue+iview+less 实现一键换肤
1. 准备两个less文件:1.1 theme.less 用于定义控制样式的函数.theme( @Background: #1D2B40, @Border: #000017,){ .header{ background: @Background; border-bottom: 1px solid @Border; }}2.2 colo...原创 2020-01-19 17:48:31 · 1399 阅读 · 0 评论 -
box-shadow阴影被覆盖问题
{ position:relative; z-index:100 }原创 2019-12-13 11:37:11 · 1414 阅读 · 0 评论 -
Less 快速入门
官网文档(中文):Less 安装Less 快速入门Less 函数手册一、less.js引用方法:在浏览器中使用Less.js是最简单的入门方式,并且使用Less进行开发很方便。(但是在生产中,当性能和可靠性很重要时,我们建议使用Node.js或许多可用的第三方工具之一进行预编译,本文暂时不写这方面内容)1.首先,将自己建的styles.less样式表的rel属性设置为“ styles...原创 2019-10-17 15:58:31 · 692 阅读 · 0 评论 -
在不确定自身宽度的情况下,用 CSS 实现元素水平居中的2种方法
镜像文章:在不确定自身高度的情况下,用 CSS 实现元素垂直居中的3种方法方法一:<div class="wrap"> <div class="inner">html : 让 inner 居中</div></div><style>.wrap { float: left;/* 为了让 wrap 的宽度等于 inner ...原创 2019-10-17 10:58:52 · 584 阅读 · 0 评论 -
css实现下拉菜单以及下拉箭头旋转效果
<div class="header-admin"> <div class="header-admin-name">用户名</div></div>.header-admin-name{ position: relative;}.header-admin>div.header-admin-name::before {...原创 2019-10-12 11:07:27 · 3253 阅读 · 0 评论 -
css通用样式表
body { font-size: 14px; margin: 0; padding: 0; font-family:PingFang SC; color: #333;}ul, li, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, button, textarea, input ,tr,td{ margin: 0;...原创 2019-10-12 10:25:01 · 273 阅读 · 0 评论 -
自定义radio/checkbox样式
HTML:<div class="form-item"> <div class="form-item-inline"> <input type="radio" name=""> <label></label> <span>text</span> &l...原创 2019-10-12 10:16:14 · 145 阅读 · 0 评论 -
css3背景颜色线性渐变兼容ie9浏览器方法(背景颜色线性渐变在ie9下失效问题解决)
{background:linear-gradient(178deg,rgba(99,91,254,1) 0%,rgba(105,114,255,1) 100%);background:-moz-linear-gradient(178deg,rgba(99,91,254,1) 0%,rgba(105,114,255,1) 100%);background:-webkit-linear-gra...原创 2019-07-18 09:55:46 · 1131 阅读 · 0 评论 -
ie、火狐、谷歌浏览器隐藏滚动条
转载:https://www.cnblogs.com/liuyanxia/p/8675752.html关于ie,火狐,谷歌浏览器滚动条的隐藏以及自定义样式最近做了一个项目,要求各个浏览器统一滚动条的样式,不显示滚动条,但是不影响鼠标的滑动事件。查了很多资料,ie和谷歌都是可以自定义滚动条样式的,但是ie只能改变颜色,并不能修改宽度,圆角之类的。谷歌就比较随和了,可以自定义样式。谷歌自定义滚...原创 2019-07-10 10:35:19 · 626 阅读 · 0 评论 -
input隐藏边框和选中样式
//只需css增加以下两条border: none;outline: none;原创 2019-05-21 13:41:42 · 1497 阅读 · 0 评论 -
div添加cursor:pointer;失效问题
添加z-index:99;原创 2019-05-21 11:14:30 · 7225 阅读 · 1 评论 -
pc 浏览器最小字体12px
在浏览器设置12px以下字体大小,chrome和opera浏览器中都显示为12px解决办法:transform:scale(0.5) //使用scale进行缩小原创 2019-08-20 13:54:34 · 1710 阅读 · 0 评论 -
textarea 输入框限制字数(兼容ie)
问题:在input标签中,只需要设置maxlength=”***”即可,但是在textarea标签中,IE9及IE9以下浏览器是不支持的,IE10、IE11则支持解决:<textarea id="taContent" rows="3" maxlength="20" onchange="this.value=this.value.substring(0, 20)" onkeydown...原创 2019-09-03 16:26:18 · 541 阅读 · 0 评论 -
在不确定自身高度的情况下,用 CSS 实现元素垂直居中的3种方法
1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行(推荐)parentElement{ position:relative;}childElement{ position: absolute; top: 50%; transform: translateY(-50%);}2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可parentE...原创 2019-09-03 16:39:32 · 556 阅读 · 0 评论 -
css 英文或数字溢出问题
连续的输入英文或者是数字,就会产生这个问题。如果正常的中文就不会产生这种问题。连续英文算作一个单词。解决办法:CSS里填加 word-wrap:break-word;...原创 2019-09-03 16:41:58 · 779 阅读 · 0 评论 -
利用css实现鼠标经过元素,下划线由中间向两边展开
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标移入下划线展开</title><style type="text/css">#underline{ width: 200px; height: 50px...原创 2019-10-08 09:05:04 · 384 阅读 · 0 评论 -
css3实现三角形、等腰梯形
三角形<div class="box"></div>.box { width:0px; height:0px; border-top:50px solid rgba(0,0,0,0); border-right:50px solid rgba(0,0,0,0); border-bottom:50px solid green; border-left...原创 2019-08-12 16:03:52 · 584 阅读 · 0 评论