css
关注
分享
扫一扫
韭伍後
前端爬坑ing
展开
-
box-shadow阴影的妙用-笔记
注意阴影的这个颜色要和边框的颜色一致，就能出这种效果。原创 2022-12-23 16:55:35 · 148 阅读 · 0 评论 -
cursor设置为自定义图片
这里的url可以是常用图片格式，可以是base64图片。总结：图片不要过大，最好是32*32的图片，如果过大，则直接忽略你的图片。原创 2022-12-14 12:51:49 · 1520 阅读 · 0 评论 -
css修改滚动条样式
话不多说，直接上代码。原创 2022-12-14 12:22:15 · 162 阅读 · 0 评论 -
前端经典面试题整理
https://blog.csdn.net/cai_niao5623/article/details/120993974 https://blog.csdn.net/cai_niao5623/article/details/121120372 https://blog.csdn.net/cai_niao5623/article/details/120902001 https://blog.csdn.net/qq_43340606/article/details/12原创 2022-07-06 12:08:19 · 567 阅读 · 0 评论 -
js动画-tween.js
1、安装npm install @tweenjs/tween.jsoryarn add@tweenjs/tween.js2、变幻的数字案列<template> <div class="compA"> <input v-model.number="num" type="number" step="20"> <p>{{ animatedNumber }}</p> </div></tem.原创 2022-04-10 22:56:23 · 1027 阅读 · 0 评论 -
js动画-学习笔记
1、匀速运动<!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, initial-scale=1.0"> <ti原创 2022-04-10 14:52:54 · 522 阅读 · 0 评论 -
css nth-child(n)妙用
经常在写样式的时候会碰到各种业务需求，比如选中后3个元素，前2个元素，奇数元素，偶数元素等等，在这里做个总结吧1、选择奇数元素、偶数元素/* 选择奇数元素 */li:nth-child(odd) { background-color: green;}/* 选择偶数元素 */li:nth-child(even) { background-color: hotpink;}2、选择第3个元素、倒数第3个元素/* 选择第3个元素 */li:nth-child(3) {原创 2021-11-15 10:49:04 · 318 阅读 · 0 评论 -
HTML+CSS-三角形的边框
首先用css制作一个三角形<style> .triangle { width: 0; height: 0; border-top: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid chocolate; border-left: 30px solid transp原创 2021-11-04 14:22:34 · 1262 阅读 · 0 评论 -
flex布局详解
设置或检索弹性盒伸缩基准值弹性盒伸缩基准值设置或检索弹性盒模型对象的子元素出現的順序flex布局也叫弹性布局，任意容器都可以被指定为flex布局。它可以帮助我们快速、高效、简单、响应式的完成各种页面布局。那用在工作中，就是一个字香啊。所以掌握flex布局对我们来说是至关重要的。下面我们详细介绍flex布局吧如何让元素成为flex容器，只需要给盒子display：flex即可。这样这个盒子的子元素就会按照你的意愿，排列成响应的布局。下面看看flex的一些属性吧<style> .b原创 2021-10-22 16:57:17 · 140 阅读 · 0 评论 -
CSS让元素水平垂直居中的几种方式
1、定位法首先采用子绝父相的方法给元素定位，然后给子元素left: 50%和top: 50%，这个时候子元素的左边/上边到父元素的左边/上边正好是父元素宽度的一半，然后这个时候只要移动子元素的一半，就正好实现水平垂直居中啦 <style> .father { width: 200px; height: 200px; background-color: chocolate;原创 2021-10-11 15:23:49 · 326 阅读 · 0 评论 -
清除浮动的几种方式
ps:清除浮动就是解决子元素浮动父盒子高度为0的问题，下面是没有清除时候的效果图下面列出几种常见的清除浮动的方式1、给父盒子高度<style> .box { /* 第一种方式：给父盒子高度 */ height: 50px; } .box > div{ width: 100px; height: 50px; margin-right: 15px; b.原创 2021-10-09 14:13:33 · 115 阅读 · 1 评论 -
在vue项目中使用animate.css
第一步：安装npm安装npm install animate.css --saveyarn安装yarn add animate.css第二步：使用main.js中import animated from 'animate.css'Vue.use(animated)vue中(animate__animated是基类，必须要写)<template> <div class="box"> <div class..原创 2021-09-26 10:23:15 · 501 阅读 · 0 评论 -
解决border-image无效问题
ps：本人菜鸟一枚，仅记录工作中遇到的问题，还请广大网友多多包涵，不喜勿喷，谢谢~正文：今天再写uniapp小程序项目的时候遇到一个问题，给元素上border-image后不起效果，后来经过一顿捯饬，发现好像是新版谷歌浏览器的bug，我们只需要给元素加上boder:1px solid;就能解决这个问题了1、border-image不生效2、border-image生效注意：这里要注意的是border属性要在border-image属性的前面，否则border-image...原创 2021-09-23 14:02:09 · 5133 阅读 · 0 评论