css
关注
分享
扫一扫
文章平均质量分 61
Dark_programmer
这个作者很懒，什么都没留下…
展开
-
css - - - - - 环形倒计时进度条实现
css - - - - - 环形倒计时进度条实现原创 2024-07-16 15:25:44 · 1231 阅读 · 0 评论 -
css - - - - - 去除图片默认的白色背景（混合模式 mix-blend-mode）
css - - - - - 去除图片默认的白色背景（混合模式 mix-blend-mode）原创 2024-07-15 14:31:36 · 1114 阅读 · 0 评论 -
css - - - - - media媒体查询
media媒体查询原创 2023-02-14 12:24:08 · 157 阅读 · 0 评论 -
css -- 为什么:last-child 无效?
在产品需求中，总有对第一个或者最后一个同类元素进行特殊的样式处理。如果使用js来判断哪个是第一个、最后一个也并不是不可以。但是，完全属于css的管理范围为什么要去使用js呢？css选择器出场！下面仅展示:last-child效果1.期望效果代码展示:<template> <div class="root-container"> <div class="father"> <div class="child" v-for="item原创 2022-02-15 17:43:37 · 10668 阅读 · 1 评论 -
css -- 如何让图片展示模糊的效果？
一般展示图片，仅需要能后展示出来即可。如：但是，如果需要展示模糊的效果，该如何调整呢？期望效果如下：刚开始思路是想在图片上面盖上一个容器，然后调整容器的透明度，发现效果并不理想。效果如图：然后研究了一下css的，发现CSS有一个属性filter。作用是将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。将该属性设置给图片即可。代码:<template> <image src='...'/></template>&l原创 2022-01-07 14:30:04 · 2701 阅读 · 0 评论 -
flex:1的宽度与预想效果的不一样？
为什么有时候flex：1的效果会与预想的不一样呢？1.问题描述：明明使用flex: 1是让填充剩余空间，可当其内容很大时却把其他容器给挤没了2.代码展示：代码如下：<template> <view class='root-container'> <view class="search-item flex"> <view class="avatar"> <image src='../../static/images/a1.jp原创 2022-01-05 16:11:05 · 901 阅读 · 0 评论 -
vue -- 角标的添加
效果图：有的时候，在图片或者标签的左（右）上角展示一个角标。那么该如何实现呢？思路：图片包裹在一个容器里，且这个容器有定位属性便于后代元素进行定位，溢出部分隐藏（为了仅显示一个三角）一个角标标签，旋转45度+绝对定位（top:角标标签高度的一半，right:角标标签宽度的一半）角标标签内部一个元素，用于控制文案展示在角标标签的底部代码如下：<template> <div class="root-container"> <h2 class="m原创 2021-12-17 17:22:15 · 4230 阅读 · 0 评论 -
如何设置独特的鼠标点击效果?
先上效果图：实现代码：<script>export default { name: "index", data() { return { txt: ["给个关注", "有求必应", "交个朋友", "多多留言", "点个赞吧"] }; }, beforeMount() { let _this = this; this.$nextTick(() => { let ele = document.getElement原创 2021-12-15 11:33:42 · 786 阅读 · 0 评论 -
通过js 快捷给元素设置多个css属性 -- cssText
cssTextjs操作dom元素是很常见的操作。有这么一个场景，对新创建的dom元素通过js设置多组css属性。基操：let element = document.createElement("div");document.body.appendChild(heart).innerHTML = '我是新建元素的文案';element.style.height = '100px'; // 设置元素高度element.style['text-align'] = '100px'; // 设置元素行原创 2021-12-14 17:24:40 · 3450 阅读 · 0 评论 -
css如何取消已经设置过的宽高属性？
无数经验，都是从教训中得来的CSS取消宽高属性1.场景描述2.布局、样式3.解决办法1.场景描述有层级为3的一组div标签，class名分别为container、wrap、content，需求是当盒子wrap的高度大于盒子container时，可以进行滚动。但是此时盒子wrap使用了一个全局css样式height：100%，就是说此时container 、wrap高度一致，需要将wrap改为自适应高度（即内容盒子content撑开的高度）2.布局、样式<template> .原创 2021-11-03 16:19:10 · 7087 阅读 · 0 评论 -
如何修改用户文档选中高亮效果？
默认的文档中被用户高亮的部分，样式是如下图所示：看起来中规中矩，但是没有一点新意。那么如果自定义高亮部分的样式效果呢？使用::selection即可：代码设置如下：::selection { color: #fff; // 高亮时的文字颜色 background-color: #a862ea; // 高亮时的背景颜色}...原创 2021-10-25 10:37:24 · 250 阅读 · 0 评论 -
炫酷loading等你挑选.css-spinners
css-spinners一、css-spinners二、项目里使用一、css-spinners【git地址】【在线展示】二、项目里使用1.引入需要的样式<head> <link rel="stylesheet" href="http://css-spinners.com/css/spinner/spinner.css" type="text/css"> <link rel="stylesheet" href="http://css-spinners.com/原创 2021-09-01 14:52:33 · 391 阅读 · 0 评论 -
loading加载动画太过枯燥？ 快来试试 loader.css
loader.css一、loader.css二、项目使用一、loader.css【git地址】【在线展示】二、项目使用前端是用vue脚手架搭件的项目.安装 loader.cssyarn add loaders.css -S项目引入main.js 注入以下代码 import "loaders.css/loaders.min.css";页面使用复制需要的款式即可<div class="loaders"> <!-- 第1种 -->原创 2021-09-01 12:33:12 · 390 阅读 · 0 评论 -
ios的input框在禁用状态 字体颜色修改无效？？？？？？
奇奇怪怪，可可爱爱问题描述：在移动端有input输入框，但是是禁用的状态，但是默认的字体颜色和大背景颜色又区分不开。想着用 !important强制改掉，在pc端切换成pad模式或者手机模式，显示正常；但是在真正的pad端查看，颜色仍是无变化问题原因：移动端环境下android只需设定input的color即可而ios下input disabled的默认样式会有默认样式opacity以及隐藏样式-webkit-text-fill-color.el-input input{ col.原创 2021-04-07 16:48:04 · 1309 阅读 · 1 评论 -
设置了背景图，但是第一次hover会闪烁，该如何解决？？？？？
铁打的营盘流水的兵当下有这么一个需求，鼠标经过图片的时候，切换显示的图片思索许久，倒也有了那么两三个解决方案方案一、动态切换显示的组件方案二、动态切换背景图的路径基于以上的两种方案，分别给个简单的????：方案一：html:<div>鼠标经过，切换背景图</div><comp1 v-if="isHover" :imgSrc="isHover? imgSrc1 :imgSrc2" /><comp1 v-else :imgSrc="isHove原创 2021-04-06 16:16:35 · 3061 阅读 · 1 评论 -
过渡动画transition在vue的使用
transition & vueVue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果在vue里，可给任何元素和组件添加进入/离开过渡举个栗子：html:<template> <div class="root-container"> <div id="databinding"> <el-button :type="show?'warning':'success'" @click="show = !show"原创 2021-03-25 14:16:17 · 267 阅读 · 1 评论 -
css3 border渐变实现
纵然尝试千百遍，也要把ta给实现原创 2021-03-18 17:44:18 · 2563 阅读 · 0 评论 -
css渐变色
css渐变色一、属性介绍二、使用演示一、属性介绍属性值：linear-gradient ( 线性渐变 )radial-gradient ( 径向渐变 )repeating-linear-gradient （ 重复线性 ）repeating-radial-gradient （ 重复径向 ）【MDN地址】二、使用演示...原创 2021-01-17 21:55:07 · 1059 阅读 · 0 评论 -
div水平垂直居中的方法
方法一、绝对定位方法若当前div的宽高未知，可使用transform: translate(-50%, -50%)。给父级元素使用相对定位,当前元素使用绝对定位，left,top均为50%，那么子元素的中心点就会在父级元素的中心，再将子元素偏移自身宽高的一半，即可水平垂直居中。代码示例：布局： <div class="father"> 这里是父容器 &...原创 2020-03-28 18:25:09 · 1289 阅读 · 0 评论 -
弹性布局 flex
1、flex布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex; 属性，便可以实现其子元素在父元素中的弹性布局。但要注意的是 display:fle...原创 2020-03-29 18:09:37 · 405 阅读 · 0 评论 -
css布局 之 左侧宽度固定，右侧自适应两栏布局
布局代码如下，文章统一使用布局<body> <div class="wrapper"> <div class="left">左侧宽度固定</div> <div class="right">右侧宽度自适应</div> </div></body>方法一、左侧...原创 2020-04-04 22:47:54 · 408 阅读 · 0 评论 -
css 高度塌陷的解决办法
高度塌陷的解决办法一、为什么会出现高度塌陷二、解决高度塌陷2.1 给父元素一个固定的高度2.2 父元素也浮动2.3 给父元素添加属性 overflow: hidden;zoom:1;2.4 在浮动元素后添加一个div2.5 万能清除浮动法一、为什么会出现高度塌陷父元素高度自适应，子元素浮动，只要子元素脱离了文档流后，造成父元素高度为0，称为高度塌陷问题。那么为什么会出先高度塌陷问题呢？二、解决高度塌陷2.1 给父元素一个固定的高度最简单粗暴的解决方式就是给父容器一个固定的高度。推荐指数：☆缺点原创 2020-05-21 16:28:18 · 364 阅读 · 0 评论