WebKit

首页 > TAG信息列表 > WebKit

隐藏input type='number'时自带的加减按钮

隐藏input type='number'时自带的加减按钮，如图 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type='number'] { -moz-appearance: textfield; }

css设置浏览器的滚动条

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

清除浏览器默认样式

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{f

CSS 字体超出省略号

单行省略号用法：为已有宽度的盒子添加属性: 属性取值解释 white-space nowrap 让文字在一行内显示, 不换行 overflow hidden 当内容超过盒子宽度, 隐藏溢出部分 text-overflow ellipsis 如果溢出的内容是文字, 就用省略号代替如图多行省略号多行省略号只能

scrollbar.css

/* 根据实际需求，可以不要。 */ body { overflow-y: scroll; } ::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px; } /*定义滚动条轨道内阴影+圆角*/ ::-webkit-scrollbar-track { border-radius: 10px; background

文本溢出显示省略号

1.单行文本溢出 overflow:hidden; //超出部分隐藏 text-overflow:ellipsis; //超出部分用省略号代替 white-space:nowrap; //规定在一行内显示 2.多行文本溢出 overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; //限制在一个快元素显示的文本的行数 display:

导航页面设计/课程

导航页面设计/课程导航页面设计/课程免费下载在 HTML、CSS 和 JavaScript 中 HTML：部分导航 h1 前沿趋势 h3.span.loader 跨度.m B 跨度.m E 跨度.m N 跨度.m E 跨度.m F 跨度.m I 跨度.m T 跨度.m S 跨度.m 跨度.mo 跨度.mf 跨度.m

CSS 设置滚动条样式 ::-webkit-scrollbar

::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例如, 谷歌Chrome, 苹果Safari)可以使用. ::-webkit-scrollbar — 整个滚动条. ::-webkit-scrollbar-button — 滚动条上的按钮 (上下箭头). ::-webkit-scrollbar-thumb — 滚动条上的滚动滑块. ::-webkit-scrollbar-track — 滚动

自定义滚动条样式不生效：横轴设置 height，纵轴设置 width

问题在修改滚动条样式时，两个类名，一个地方生效，另一个地方不生效。解决办法捣鼓很久才发现，原来横轴要设置 height，纵轴要设置 width。 // 滚动条的样式，高宽分别对应横竖滚动条的尺寸 ::v-deep .lib-table::-webkit-scrollbar, ::v-deep .pagination-container::-webkit-scroll

文字背景粒子特效

前言一款jQuery+CSS3的文字背景粒子动画特效，一共6种粒子效果，每种文字背景的粒子效果都不同，有漂浮的有坠落的等等。 0x001 特效演示 This is fires This is lines This is hearts This is bubbles This is confetti This is sunbeams 0x002 Fires 特效 1. JS 代码

flex项目属性align-self属性重写align-item属性

Flex 布局 display:flex 与 inline-flex 区别

1.Flex布局 display:flex .bigbox{ width: 500px; height: 400px; background:#ff0000; display: flex; } .smallbox{ width: 100px; height: 100px; background: #f5f5f5; margin: 10px; } <span>flex</span> <div class="

vue实现页面文字禁止被选中

其实使用css就可以实现 *{ -webkit-touch-callout:none; /*系统默认菜单被禁用*/ -webkit-user-select:none; /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{

文本超出部分显示省略号

1. 单行文本超出部分显示省略号 ①第一步：溢出隐藏 —— overflow: hidden; ②第二步：让文本不会换行，在同一行显示——white-space: nowrap; ③第三步：用省略号来代表未显示完的文本 ——text-overflow: ellipsis; 2. 多行超出部分显示省略号 ①第一步：溢出隐藏 —— overflow:

Flex布局

Flex布局 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。父元素设置 .parent{ /* 旧版 */ display:-moz-box; /* 兼容 Firefox */ display:-webkit-bo

css设置滚动条样式

//横向滚动条 .rongyuChoose { overflow-x: scroll; } .rongyuChoose::-webkit-scrollbar { /*滚动条整体样式*/ width: 100px; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px; } .rongyuChoose::-webkit-scrollbar-thumb { /

css文本超出一行或多行显示省略号

麻雀虽小，五脏俱全。CSS文本溢出就显示省略号，很实用的效果，却常常让我忘记样式代码...很尴尬的说，记录一下，方便开发Ctrl+V和Ctrl+C 溢出一行显示省略号： /*主要复制这三行，基本就有效果，没有效果的话，那得设置具体宽度*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis

移动端页面布局

　　一、移动适配　　　　移动端调试：　　二、视口　(viewport)　　　　　　2.1 布局视口　　layout viewport 　　早期使用，一般设置为980px 　　　　2.2视觉视口　　visual viewport　　用户正在看到的网站的区域　　　　2.3理想视口　　ideal viewport　　需要手动添加me

一个自适应切符合一般变换需求的swiper

index.html  <!DOCTYPE html> <html lang="en"> <head> <meta charset="

css 如何修改滚动条样式

默认滚动条样式如下：那如何修改呢？如下代码： <div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="height:400px;">这里是内容222</p> <p&g

el-input type=number时去掉右侧加减箭头

<el-input v-model.trim="form.threshold" placeholder="请输入" class="flex-1 editNum" type="number" > </el-input> .editNum { input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {

CSS：凹凸文字，空心文字，精灵图（简），盒模型

凹凸文字 class=‘ao’凹 class=‘to’凸 text-shadow：空心文字 -<p> -webkit-text-fill-color: 颜色; -webkit-text-stroke-color: 颜色; -webkit-text-stroke-width: 大小; 精灵图(雪碧图) 为了节省网络资源，通常网页上小图标和图片都合成在一张图片上，到使用的时候

css 实现div内显示两行或三行，超出部分用省略号显示

css 实现div内显示两行或三行，超出部分用省略号显示一、div内显示一行，超出部分用省略号显示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 二、div内显示两行或三行，超出部分用省略号显示 .line__3 { display: -webkit-box; overflow: hidde

文本省略号

1.单行实现文字省略号 /这里要显示的设置宽度/ overflow:hidden; white-space:nowrap; /文字超出宽度则显示ellipsis省略号/ text-overflow:ellipsis; width:100%; 2345截图20181015145014.png 2.第几行实现文字省略号 display:-webkit-box; -webkit-box-orient:vertical;/设置方

高阶切图技巧！基于单张图片的任意颜色转换

今天，要介绍一种基于 CSS mask-composite 的高级技巧。通过掌握它，我们可以通过一张图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。通过单张 PNG/SVG 得到它的反向切图事情的经过是这样的，某天，我们拿到了这样一张 PNG/SVG 图片：就这张图片而言，它是一张 PNG 图，灰色部分