css - 随笔分类 - 13522679763-任国强

css半透明效果

摘要：.VPNav.no-sidebar[data-v-4da33ef2] { -webkit-backdrop-filter: saturate(50%) blur(8px); backdrop-filter: saturate(50%) blur(8px); background: rgba(255, 阅读全文

posted @ 2022-08-09 19:03 13522679763-任国强阅读(30) 评论(0) 推荐(0)

css 单行和多行文本显示

摘要：.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multiline-ellipsis { overflow: hidden; text-overflow: ellipsis; di 阅读全文

posted @ 2022-06-02 17:32 13522679763-任国强阅读(177) 评论(0) 推荐(0)

padding-bottom 撑开图片防止页面抖动图片宽/图片高百分比

摘要：/* padding-bottom 撑开图片防止页面抖动图片宽/图片高百分比 */ .banner{ height: 0; overflow: hidden; padding-bottom: 25.4%; .banner__img{ width: 100%; } } 阅读全文

posted @ 2021-12-17 11:15 13522679763-任国强阅读(67) 评论(0) 推荐(0)

设置字体大小缩放为一半方法-》设置字体为10px 方法

摘要：.docker__title { font-size: 20px; transform: scale(.5,.5); transform-origin: center top; } 阅读全文

posted @ 2021-12-16 17:31 13522679763-任国强阅读(326) 评论(0) 推荐(0)

banner 全屏自适应

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2021-01-22 11:56 13522679763-任国强阅读(261) 评论(0) 推荐(0)

css 文本超出行数自动隐藏显示省略号

摘要：{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:2; // 显示2行 } 阅读全文

posted @ 2021-01-20 21:50 13522679763-任国强阅读(70) 评论(0) 推荐(0)

水平撑开元素方法

摘要：父元素定位position: absolute;white-space: nowrap;font-size: 0; 子元素转换行内块元素 display:inline-block; 阅读全文

posted @ 2020-10-03 16:18 13522679763-任国强阅读(101) 评论(0) 推荐(0)

js时分秒毫秒倒计时

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js时分秒毫秒倒计时</title></head><body><div> <span id="_d">00</span> <span id="_h">00</spa 阅读全文

posted @ 2020-09-26 22:39 13522679763-任国强阅读(309) 评论(0) 推荐(0)

径向渐变

摘要：○ radial-gradient(形状 at 位置, 颜色, 颜色, 颜色) background-image:radial-gradient(green,yellow,orange); <!DOCTYPE html><html lang="en"><head> <meta charset="UT 阅读全文

posted @ 2020-09-26 11:17 13522679763-任国强阅读(257) 评论(0) 推荐(0)

线性渐变

摘要：DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 300px; height: 300px; margin: 100px auto; /*back 阅读全文

posted @ 2020-09-25 23:45 13522679763-任国强阅读(161) 评论(0) 推荐(0)

立方体动画

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html{ perspective: 800px; } .box1{ transform-style: preserve 阅读全文

posted @ 2020-09-22 22:32 13522679763-任国强阅读(151) 评论(0) 推荐(0)

transform 变形旋转

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html{ /*perspective 视距，设置人的眼睛和网页之间的距离*/ perspective: 800px; 阅读全文

posted @ 2020-09-21 23:37 13522679763-任国强阅读(178) 评论(0) 推荐(0)

css 动画

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ height: 256px; /* calc() 用来帮助我们计算 */ width: calc(1536 阅读全文

posted @ 2020-09-21 22:38 13522679763-任国强阅读(97) 评论(0) 推荐(0)

css 过渡

摘要：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>过渡</title> <style> /*过渡，可以使一个属性的值经过一段时间变成另一个值*/ .box1 , .box3{ width: 100px; heigh 阅读全文

posted @ 2020-09-20 23:42 13522679763-任国强阅读(123) 评论(0) 推荐(0)

vscode 压缩 css js 代码

摘要：按Ctrl + Shift + P调出命令窗口，输入join lines,确认执行就可以合并多行了。 join lines 阅读全文

posted @ 2020-09-20 23:23 13522679763-任国强阅读(1834) 评论(0) 推荐(0)

webstorm 配置压缩css js 代码

摘要：配置成功配置文件已传到文件中阅读全文

posted @ 2020-09-20 23:16 13522679763-任国强阅读(531) 评论(0) 推荐(0)

表格日历练习

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .outer{ box-shadow: 0 0 10px r 阅读全文

posted @ 2020-09-15 23:21 13522679763-任国强阅读(108) 评论(0) 推荐(0)

利用 vertical-align 让盒子垂直水平居中

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文

posted @ 2020-09-15 22:09 13522679763-任国强阅读(161) 评论(0) 推荐(0)

雪碧图制作网址

摘要：http://alloyteam.github.io/gopng/### 阅读全文

posted @ 2020-09-15 21:49 13522679763-任国强阅读(120) 评论(0) 推荐(0)

仿京东导航和 iconfont 字体图标引入

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="style 阅读全文

posted @ 2020-09-14 22:30 13522679763-任国强阅读(357) 评论(0) 推荐(0)

Eric

随笔分类 - css

公告