![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
记录CSS相关文章
麻辣翅尖
新手小白的一去不复返之路
展开
-
解决:字体样式font-family不起作用
问题:CSS样式设置字体font-family: 华文新魏,但是运行后浏览器的字体样式根本没有使用华文新魏解决首先你先看一下自己电脑上是否有这种字体,很大可能是没有这种字体的,所以才不会显示;如果有这种字体还是不显示的话,有没有可能是写错了查看字体方法:控制面板→外观和个性化→字体如果是第一种 电脑上没有这种字体的话,就找一个网站,下载好你需要的字体一般是.ttf文件下载好后,打开文件点击左上角的**“安装”**之后,在电脑上就可以看到刚才安装的字体了还有一个办法,就是在项目中引入字体原创 2022-02-19 15:53:45 · 17025 阅读 · 0 评论 -
css实现自适应之单位vh
vh(Viewport Height)是前端开发中的一个动态单位,是一个相对于网页视口(Viewport)的单位。(与vh一起的还有vw(Viewport Width))在桌面端,视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小。系统会将视口的高度分为100份,1vh就占用视口高度的百分之一(宽度同)1vh等于视口高度的1%(1vw等于视口宽度的1%)。vw和vh与百分比不同的是,百分比永远原创 2021-12-26 17:27:45 · 2303 阅读 · 0 评论 -
CSS 3 动画 实现图片动态切换
用到的方法:动画 Animation + @keyframes注意:animation属性要与keyframes规则进行绑定CSS3 创建动画,它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时,需要把它绑定到一个选择器(例如div),否则动画不会有任何效果。动画属性属性描述@keyframes规定动画animation所有动画的简写属性animation-name规定@keyframes 动原创 2021-11-06 08:28:52 · 5862 阅读 · 1 评论 -
以图片做背景报错
./static/image/img1.jpg in ./node_modules/css-loader?{“sourceMap”:true}!./node_modules/vue-loader/lib/style-compiler?{“vue”:true,“id”:“data-v-10d9df09”,“scoped”:true,“hasInlineConfig”:false}!./node_modules/vue-loader/lib/selector.js?type=styles&index.原创 2021-11-04 17:12:44 · 145 阅读 · 0 评论 -
css绘制基本图形
说明css可以绘制各种图形,基本图形包括三角形、圆形、梯形、椭圆形、矩形等,但还有一些复杂图形是由这些基本图形组合而成基本形状三角形.triangle { width: 0; height: 0; border: 50px solid blue; /* 通过改变边框颜色,可以改变三角形的方向 */ border-color: blue transparent transparent transparent;}梯形.trapzoid { wi转载 2021-09-20 16:55:10 · 253 阅读 · 0 评论 -
解决element组件样式更改困难
原因首先我们通过查找得到原因:style的scoped属性,scoped表现为css的私有作用域,实现样式私有化,而el-input是element公共组件,正因如此,scoped使其样式难以更改。下面我们来介绍一下。1、什么是scopedvue项目文件中style样式的特殊属性,定义私有作用域。也就是说当style标签带有scoped属性则css样式只作用于当前组件,优点是使各组件之间互不影响,缺点是使公共组件的样式难以更改。2、scoped工作的原理给HTML的DOM节点加一个不重复data原创 2021-10-06 17:23:12 · 474 阅读 · 0 评论 -
去掉router-link文字的下划线
哦买噶,router-link会带下划线,嘤嘤嘤,找了半天才发现QAQ我应该不是最后才知道的吧! <router-link to="check"> <span class="one"> <i class="el-icon-arrow-left"></i>返回 <span class="two">未审核图册</span> </span> </router原创 2021-05-28 14:39:38 · 5669 阅读 · 2 评论 -
css实现内容垂直居中
{ /*flex布局*/ display:flex /*处置居中*/ align-items: center; /*水平居中*/ justify-content: center;}原创 2021-11-01 10:55:20 · 57 阅读 · 0 评论