wg_iGBFcBFB的博客_css

css半透明效果

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

ide

原创 2022-10-21 14:33:47 831 阅读

css 单行和多行文本显示

.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .multiline-ellipsis { overflow: hidden; text-overflow: ellipsis; di

css

原创 2022-06-05 19:47:11 689 阅读

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

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

其他

原创 2021-12-23 11:50:49 301 阅读

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

.docker__title { font-size: 20px; transform: scale(.5,.5); transform-origin: center top; }

docker

原创 2021-12-23 11:50:39 655 阅读

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

{ display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp:2; // 显示2行 }

其他

原创 2021-07-28 15:51:33 532 阅读

banner 全屏自适应

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<

其他

原创 2021-07-28 15:51:09 666 阅读

径向渐变

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

Java

原创 2021-07-28 15:24:25 155 阅读

线性渐变

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

Java

原创 2021-07-28 15:24:12 257 阅读

transform 变形旋转

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

Java

原创 2021-07-28 15:23:10 302 阅读

立方体动画

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

Java

原创 2021-07-28 15:22:55 319 阅读

css 动画

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

Java

原创 2021-07-28 15:22:42 251 阅读

vscode 压缩 css js 代码

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

Java

原创 2021-07-28 15:22:29 1281 阅读

css 过渡

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

Java

原创 2021-07-28 15:22:16 539 阅读

webstorm 配置压缩css js 代码

配置成功配置文件已传到文件中

配置文件

原创 2021-07-28 15:21:56 628 阅读

利用 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<

Java

原创 2021-07-28 15:21:24 120 阅读

表格日历练习

<!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

Java

原创 2021-07-28 15:21:11 89 阅读

bfc 既可以解决高度塌陷问题也可以外边距重叠问题

既可以解决高度塌陷问题也可以外边距重叠问题 .clearfix::after, .clearfix::before{ content: ""; display: table; clear: both; } <!DOCTYPE html> <html lang="en"> <head> <meta

Java

原创 2021-07-28 15:19:50 222 阅读

css normalize.css 统一样式会保存标签的默认样式

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document */ /** * 1. Correct the line height in all browsers. * 2. Pre

Java

原创 2021-07-28 15:19:34 182 阅读

轮廓和阴影

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: #

Java

原创 2021-07-28 15:19:16 167 阅读

css reset.css 重置样式表会清除标签的默认样式 margin 和 padding

/* v2.0 | 20110126 http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h

Java

原创 2021-07-28 15:18:36 766 阅读

checkbox 修改背景图片改变样式

<div class> <input style="margin-top: 5px;" type="checkbox" name=""/> <label class="check-all"></label> </div> label{ display: inline-block; padding-l

Java

原创 2021-07-28 15:18:25 901 阅读

三角形

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { /*我们用css 边框可以模拟三角效果*/ width: 0; height: 0; border-t

Java

原创 2021-07-28 15:15:45 472 阅读

溢出的文字省略号显示 css精灵技术 margin-left 负值可以解决边框问题

<title>溢出的文字省略号显示</title> <style> div { width: 150px; height: 25px; border: 1px solid pink; /*当文字显示不开的时候，自动换行*/ /*white-space: normal;*/ /*1. 要文字强制一行内

Java

原创 2021-07-28 15:15:33 149 阅读

vertical-align:

.one { /*默认的是基线对齐*/ vertical-align: baseline; } .two { /*让图片的中线对齐文字的中线垂直居中*/ vertical-align: middle; } .three { /*让图片的顶线对齐文字的顶线顶部对齐*/ vertical-a

Java

原创 2021-07-28 15:15:21 208 阅读

防止拖拽文本域

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>防止拖拽文本域</title> <style> textarea { width: 500px; height: 249px; /*取消轮廓线*/ outline:

Java

原创 2021-07-28 15:15:08 186 阅读

清除浮动样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米案例练习</title> <style> /*清除元素默认内外边距样式*/ * { margin: 0; padding: 0; } /*清除列表样式前面的小

Java

原创 2021-07-28 15:14:57 117 阅读

浮动效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小米案例练习</title> <style> /*清除元素默认内外边距样式*/ * { margin: 0; padding: 0; } /*清除列表样式前面的小

Java

原创 2021-07-28 15:14:41 219 阅读

盒子阴影

width: 200px; height: 200px; background-color: pink; margin: 50px auto; /*box-shadow:水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小）阴影颜色内/外阴影；*/ box-shadow: 0 15px 30

Java

原创 2021-07-28 15:14:24 543 阅读

盒子边框内边距盒子实际的大小外边距边距合并问题

width: 200px; height: 200px; /*边框的宽度实际开发中都是跟 px 单位*/ /*border-width: 5px;*/ /*实线的*/ /*border-style: solid;*/ /*虚线的 dashed 大师的说话都很虚*/ /*border-style:

Java

原创 2021-07-28 15:14:12 375 阅读

css 优先级

/*div { color: red; }*/ /*标签选择器权重 0,0,0,1 小组长*/ div { color: pink!important; } /*类选择器权重 0,0,1,0 班长*/ .one { color: blue; } /*id 选择器权重 0,1,0,0 班主任*/

Java

原创 2021-07-28 15:13:59 197 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

13522679763-Eric-任国强

css半透明效果

css 单行和多行文本显示

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

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

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

banner 全屏自适应

径向渐变

线性渐变

transform 变形旋转

立方体动画

css 动画

vscode 压缩 css js 代码

css 过渡

webstorm 配置压缩css js 代码

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

表格日历练习

bfc 既可以解决高度塌陷问题也可以外边距重叠问题

css normalize.css 统一样式会保存标签的默认样式

轮廓和阴影

css reset.css 重置样式表会清除标签的默认样式 margin 和 padding

checkbox 修改背景图片改变样式

三角形

溢出的文字省略号显示 css精灵技术 margin-left 负值可以解决边框问题

vertical-align:

防止拖拽文本域

清除浮动样式

浮动效果

盒子阴影

盒子边框内边距盒子实际的大小外边距边距合并问题

css 优先级