首页 > TAG信息列表 > 4px

css设置浏览器的滚动条

#scrollbar::-webkit-scrollbar {     // 滚动条整体部分，其中的属性有width,height,background,border（就和一个块级元素一样）等。     width: 4px;     height: 4px;   }   #scrollbar::-webkit-scrollbar-button {     // 滚动条两端的按钮。可以用display:none让其不

通过 css3 自定义、修改滚动条的样式

::-webkit-scrollbar { width: 4px !important; background-color: #012d58 !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb { border-radius: 4px !important; background-image: linear-gra

去除行内元素之间空隙的几种方式

去掉空格 <ul> <li> one</li><li> two</li><li> three</li> </ul> 或者 <ul> <li>one</li ><li>two</li ><li>three</li> </ul> 或者 <ul> <l

css实现炫酷进度条

实现效果： 代码内容： <div className={styles.progressBox}> <div className={styles.progress}></div> <div className={styles.progress_bar} style={{ width: "40%" }}></div></div>   代码样式实现： .progressBox { f

微信小程序 漂亮的按钮 多颜色+动态效果，好看的button

今天推荐一款好看的微信小程序按钮效果，可定制多种颜色， 有动画效果。 显示效果如下：     动态效果预览：   红色按钮代码如下： /** button **/.button1 { position: relative; display: inline-block; min-width: 140rpx; padding: 10px 40rpx; margin: 0px 40rpx; z-index:

CSS – 冷知识 (新手)

<img> extra 4px at the bottom 参考:  Extra 4px at the bottom of html <img> The mysterious 4px gap in between images 效果 红色部分多出来的 4px. 原因是 img 是 inline element, 它可以和 text 并排. 注意紫色图片的位置, 这个叫 vertical-align, 默认是 baseline,

项目中自定义进度条的实现

先看效果：   直接上代码 let arr = [0,1,16] function setProcessStyle(arr = [1, 2, 3]) { // 待生产 // 已组模完成 // 隐蔽验收 // 已浇筑 // 已浇筑 let num1 = arr[0]; let num2 = num1 + arr[1]; let num3 = num2 + ar

input文件上传样式美化

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> .a-upload { padding: 4px 10px; height: 20px;

div边框动效

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=d

vue实现打标记录

项目需要的效果如下图：   实现代码： <template> <div class="step-template"> <div class="step" v-for="item in 12" :key="item"> <div class="step-l"> <p class="time"&g

css 直播柱状动图

    .live-anime { display: inline-block; vertical-align: bottom; width: 2px; background-color: white; border-radius: 2px 2px 0 0; margin-left: 2px; } .live-anime0 { height: 8px; animation: liveAnime0 1s i

根据不同的值，小三角指示不同的位置

肥胖-超重–正常–偏瘦，四个区间，用渐变色柱体显示，小三角标记位置。 根据接口返回的值，小三角移动到不同的区间不同的位置。 百分比显示； <template> <div class="box"> <div class="bmi-show"> <div class="triangle" :style="{ bottom: percentage }"><

给容器添加阴影

1、外阴影 .shadow-box{ -webkit-box-shadow:0px 0px 4px #ff0000; -moz-box-shadow:0px 0px 4px #ff0000; box-shadow:0px 0px 4px #ff0000; }   ****************************************************  分割线  **********************************

苹果手机滚动条样式无效

网上查了一些资料，提到的很少，应该是苹果手机 ios系统升级到 13.0版本后   -webkit-overflow-scrolling: touch;  会导致滚动条自定义样式无效   -webkit-overflow-scrolling: auto; 或者不写这个，如果还是无效，添加下面的红色样式部分，添加一处就可以，如果有其他的解决方式欢迎留言

CSS盒模型

CSS盒模型概述：所有 HTML 元素可以看作盒子，在 CSS 中，"box model "这一术语是用来设计和布局时使用。CSS盒模型(Box Model)规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。下面的图片说明了盒子模型 (Box Model):                    

前端学习4百度页面添加CSS样式210904

前端学习4百度页面添加CSS样式210904 一.查看并实现各个小细节出的功能把，功能导向 细一点就好 1.标签上的小图标： 把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> （1）常用的图标网站： 1.网址：i

ElementUI Table 表格的 滚动条样式设置

// 设置 1 /deep/ .el-table__header-wrapper { .gutter { display: none; } } // 设置 2 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 4px; height: 4px; } /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb { backgrou

中英文混版时的间距突然变大怎么通过CSS解决？

在使用Md2ll对Markdown编辑后的文章进行微信公众号排版时，突然遇到了一个问题——中英文混版时的间距突然变大，就像下面这样： 我是研究了两三个小时没找到好的办法，在青苗科技工作室问了小伙伴小龙才知道问题的根源，可通过一行CSS代码word-break:break-all;解决问题。针对Md2ll的自定

CSS盒模型

CSS盒模型概述：CSS盒模型(Box Model)规定了元素处理元素内容（content）、内边距（padding）、边框（border）、外边距（margin）的方式。 下图为盒模型模型图。     盒模型各部分说明： 1、content（内容）：盒子的内容，显示文本和图像。 2、padding（内边距）：内容区与边框之间的填充部分，内边距是透明的。

5-阴影

引例 box-shadow:2px 3px 4px rgba(0,0,0,.5); 绘制原理： 以该元素相同的尺寸和位置，画一个rgba(0,0,0, .5)的矩形 向右移2px；向下移3px 使用高斯模糊算法进行4px模糊处理 模糊后的形状与原始元素的交集会被切除掉 单侧阴影 div { width: 100px; height: 100px; background: o

物控流程——4px仓库管理系统批次号查询

使用 4px仓库管理系统，需要查每次上传批次，以记录每批货流转信息，地址：http://order-fulfillment.4px.com/inventory/listAlarmPage    1.打开系统后台，选择 批量管理——历史上传， 2.选择历史上传后，在跳转出的页面，选择筛选项“出库委托” + “成功”，即可看到历次成功上传的批次号，复

纯css绘制简易对话气泡

<body> <div class="curType blockCenter" > <p>绘制简易气泡</p> <div class="triangle"></div> </div> </body> <style> p{ box-shado

CSS 十字

<div class="cross"></div> 　　 .cross { width: 64px; height: 64px; position: relative; background: #1c5fea; border-radius: 32px; } .cross:after { content: ''; height: 4px; width: 24px; background: #fff;

美化网站的实用 CSS3 技巧

美化网站的实用 CSS3 技巧 黑白图像 .desaturate { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); } 页面顶部阴影 ::before { content:

纯css3发光多边形动画特效

CSS3动效集合：https://www.17sucai.com/pins/tag/5665.html <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Glowing polygons</title> <style> /* NOTE: The styles were added inl