css
小太阳...
这个作者很懒,什么都没留下…
展开
-
CSS object-fit 属性
object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。用法:object-fit 一般用于 img 和 video 标签,一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。原创 2022-10-25 11:48:06 · 641 阅读 · 0 评论 -
pointer-event属性详解
pointer-event属性详解转载 2022-10-24 15:15:15 · 517 阅读 · 0 评论 -
鼠标禁用样式(cursor:not-allowed)和鼠标禁用事件(pointer-events: none)
注意:父元素如果设置了pointer-event:none 并不意味着父元素上的事件侦听器永远不会被触发,当子元素上设置pointer-event值不是none,那么都可以通过事件传播机制来触发父元素上的事件。用法:该方法只能实现样式上的不可点击,点击依然会触发相应的点击时间,这个样式主要是配合js逻辑(return)阻止事件的发生。注意:如果同时使用这两种样式,会阻止事件的触发,但鼠标并不会显示禁用的样式,而是箭头样式。用法:该样式会阻止默认事件,但是鼠标样式会变成箭头的样子。原创 2022-10-24 14:47:52 · 4185 阅读 · 0 评论 -
svg图片调整大小和颜色
svg图片调整大小和颜色原创 2022-08-09 11:45:36 · 13475 阅读 · 0 评论 -
CSS实现文字描边效果
如图所示:热力看起来并不清楚解决:方法一: -webkit-text-stroke: length color;参数:length :文本描边宽color: 文本颜色-webkit-text-stroke: 1px #1e4dfe;效果:方法二:text-shadow例如: text-shadow: 1px 1px 0 #000;参数:text-shadow: x位移 y位移 模糊程度 颜色其中:x位移和y位移表示阴影相对文字的偏移值,可以为负值。思路: 对四个方向都作出模糊.原创 2021-10-15 17:59:01 · 1371 阅读 · 0 评论 -
移动端fixed定位时,使用width:100%会超出屏幕宽度
我的航线弹出框我是用了fixed定位,然后出现了下面这种情况,我的航线并没有垂直水平居中。代码如下:.route-modal { position: fixed; // 固定定位 width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.45); z-index: 998; .my-route { background: #fff; border-radius: 10p原创 2021-09-30 10:55:01 · 3984 阅读 · 0 评论 -
CSS插入背景图片并且充满整个容器
先上图,需要实现下面这种样式引入背景图 height: 36px; background: url('~static/assets/img/warn_border.svg') no-repeat; background-size: 100% 100%;发现并没有被撑开后来把background-size改为了cover才可以 background-size: cover;下面介绍background-size使用语法length:设置背景图像的高度和宽度。第一个值设置宽度,原创 2021-08-30 15:50:19 · 2811 阅读 · 0 评论 -
vue+scss实现一键换肤
大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux配合存储属性或接口来保存用户选择的主题。一、首先需要给项目下载配置Scss1.安装依赖npm install node-sass sass-loader --save-dev2.找到build中webpack.base.conf.js,在rules中添加scss规则{test: /\.scss$/,loaders: [转载 2021-07-09 17:32:22 · 1157 阅读 · 0 评论 -
解决rotate旋转角度无效的问题
场景,项目中需要根据风向显示不同方向的图标,如下图:我用span标签写的图标,发现并没有旋转。代码如下 <div class="weather-ws"> <span :style="{transform:item.wsDirect !== 'NaN'? getRorate(item.wsDirect):'rotate(0)'}" class="wind-direction" >{{ '➤' }}&原创 2021-03-29 16:24:07 · 1416 阅读 · 0 评论 -
实现一个元素水平居中的方法
方法一:使用position定位代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>元素垂直水平居中</title> <style>原创 2020-06-17 16:25:14 · 338 阅读 · 0 评论 -
screenX、clientX、pageX, offsetX的区别
一、图解clientY、screenY、pageY、offsetY这四者是事件对象event上的属性如图所示:假设紫色正方形中心处是点击处,紫色区域是鼠标事件触发对象二、概念1.screenX和screenY参考点:电脑屏幕左上角screenX:鼠标点击位置相对于电脑屏幕左上角的水平偏移量screenY:鼠标点击位置相对于电脑屏幕左上角的垂直偏移量2.clientX和clientY参考点:浏览器内容区域左上角clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水原创 2020-06-16 16:23:33 · 676 阅读 · 0 评论 -
css实现渐变色边框动态旋转
场景:实现渐变色边框旋转思路是:利用渐变色的背景旋转动画来实现边框旋转代码如下:<body> <!-- 最外层仅起到限制渐变区域大小的作用 --> <div class="wrap"> <!-- 渐变显示区域 --> <div class="rotate"></div> <!-- 内容区域 --> <div class="content">渐变色边框</di..原创 2020-07-28 18:00:39 · 1577 阅读 · 1 评论 -
CSS3文字渐变色设置
在项目中如果需要使用到渐变色的文字,可以用下面的方法 background-image: -webkit-linear-gradient(top, #a80b02, #ff3b30); //设置颜色与渐变方向 background-clip: text; -webkit-background-clip: text; //主要用于剪掉文字以外的区域。 -webkit-text-fill-color: transparent;//设置文本的填充颜色。注:如果同时设置 text-fill-co原创 2020-07-27 16:52:59 · 819 阅读 · 0 评论 -
css选择器之first-child和first-of-type的比较
定义::first-child 选择器匹配其父元素中的第一个子元素。:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。注意: :修饰的是当前元素,比如你想选p元素下的第一个span元素,你可以p span:first-child : {}// 或者sass写法p { & span:first-child: {}}p:first-child: {} // 错误写法小例子 <div> <p>我是p元素</p原创 2020-12-17 15:29:09 · 809 阅读 · 0 评论