-我们设置 color: green，但没有作用用。这是因为:placeholder-shown仅会针对input本身。对于实际的占位符文本，必须使用伪元素::placeholder。...这里看似empty起作用了，因为我们看到的是粉红色边框，但这实际上不起作用? 之所以显示粉红色，是因为伪类增加了 css 的权重。...pass empty string --> //css input:placeholder-shown { border-color: pink; } ?...border: 1px solid green; } 实战 用placeholder-shown我们可以实现下面动效 ?....input{ position: relative; } .input-fill{ border: 1px solid #ececec; outline: none; padding
如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。..., outline-width 和 outline-color;轮廓不占据空间，它们被描绘于内容之上 outline-offset: 一个元素边缘或边框之间的间隙; 试一试 4....缓动效果 给过渡和动画加上缓动效果是一种流行的表现手法，可以让界面显得更加生动和真实，但是在现实世界中，物体从a到b点的移动往往不是 完全匀速的，因此我们需要对动画效果加以调整，使得更加逼真 解决方案：...动画在每一动画周期中执行的节奏。...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发 当 元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素
如果没有指定，则由浏览器决定——通常是color的值，不过目前Safari取透明。 ?...outline: 是用来设置一个或多个单独的轮廓属性的简写属性 ， 例如 outline-style, outline-width 和 outline-color;轮廓不占据空间，它们被描绘于内容之上...缓动效果 给过渡和动画加上缓动效果是一种流行的表现手法，可以让界面显得更加生动和真实，但是在现实世界中，物体从a到b点的移动往往不是 完全匀速的，因此我们需要对动画效果加以调整，使得更加逼真 解决方案：...动画在每一动画周期中执行的节奏。...解决方案：:checked伪类，这个伪类只有在复选框被勾选时才会匹配，不论是由用户交互触发，还是有脚本触发 当 元素与复选框关联之后，可以起到触发开关的作用 label 不是复选框那样的替换元素
W3C维护着 一个“可动”属性列表。...as color outline-width as length padding-bottom as length padding-left as length padding-right as length...缓动函数 缓动函数用于控制动画在运行期间如何加速和减速。比如：使用ease-in。 ·函数意味着动画开始时相对缓慢，然后在进行中逐步加速。...类似于CSS3中的动画。...-动画)[http://www.w3school.com.cn/css3/css3_animation.asp]
介绍 currentColor – 这货说是CSS3的一个特性，但是用变量来说会更好理解； 兼容性[IE9+ 及主流的FF,chrome ]。...但是IE10及edge有一些BUG（用于渐变的时候会不生效） Safari and iOS Safari 8 之前，作用于部分伪元素也不生效 ，比如:before 和:after currentColor...拿的是文本的color的值，也就是可以理解为 currentColor = color currentColor可以作用于常见到的色彩作用域（border,box-shadow,outline-color...继承父类的颜色及阴影设置 */ color: inherit; background: #01E498; display: block; outline...体现，，CSS-NEXT看过一些，还是只有一些小改动
最近才第一次接触这个Normalize.css，之前Jeff 都是采用CSS Reset的，但如今发现现在流行这个Normalize.css 了。...Normalize.css 简介 官方网站：http://necolas.github.io/normalize.css/ 浏览器支持情况：Chrome, Firefox, Opera, Safari...——来源：知乎 个人感觉是HTML5、CSS3 时代的CSS Reset。...([controls]) { display: none; height: 0; } /* * 校正IE 8/9中‘hidden’属性不起作用的问题...*/ a:active, a:hover { outline: 0; } /* ===========================
; 二、移动端网页 CSS 初始化 - normalize.css ---- 移动端网页的 CSS 初始化 , 一般使用 normalize.css 样式文件 , 该初始化文件有以下优点 : 对有价值的默认值进行了初始化...; 修复浏览器的相关 BUG ; 实现了模块化 ; 提供了详细的文档 ; 下载地址 : https://necolas.github.io/normalize.css/ normalize.css...normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ============...Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */...outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */
add sass-loader -D 样式方面我们首先是会想到要给项目进行默认样式的重置，此时我们应当去使用一个比较稳定的npm 包的样式重置代码： 找到对应的源码复制一份： /** * Modern CSS...don't have a class get default styles */ a:not([class]) { text-decoration-skip-ink: auto; } /** * CSS...Reset Tweaks * * http://meyerweb.com/eric/tools/css/reset/ * v2.0-modified | 20110126 * License:...Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */...outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS.
CSS3现在已经添加到了Webkit中，现在 Apple Safari 和 Google Chrome 都已经开始支持。...于是过渡的样式终于开始写入CSS3的官方文档中。 废话少说，进入正题。 本文的例子需要支持CSS3的浏览器，所以你最好使用 Safari 或者 Chrome 来测试。...看到这个图，大家对于这几个参数的作用应该了解了吧。很简单的几个参数设置，实现了我们之前需要用大量js脚本实现的效果，那么有什么理由不期待CSS3的到来呢。...max-width Length, percentage min-height Length, percentage min-width Length, percentage opacity Number outline-color...Color outline-offset Integer outline-width Length padding-bottom Length padding-left Length padding-right
1. normalize.css 是什么？...Browser support Chrome Edge Firefox ESR+ Internet Explorer 10+ Safari 8+ Opera 3. normalize.css vs reset.css..., [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline...Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */...outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */
修改 outline-offset 到一个合适的负值 ，那么在恰当的时候，outline 边框就会向内缩进为一个加号。...outline 边框本身的宽度不能太小 outline-offset 负值 x 的取值范围为:-(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半 + outline宽度...) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...所以，动画在一开始的时刻就是下面这样： ? 以上述动画为例，一个被定义执行 3s 的动画，如果 animation-delay 为 -1s，起点相当于正常执行时，第2s（3-1）时的位置。...大会上分享的，利用负的 opacity 在 CSS 中实现了伪条件判断，配合 CSS 自定义属性，使用纯 CSS 实现 360° 的饼图效果： 第五届CSS大会主题分享之CSS创意与视觉表现 最后 额
，需要注意的是，Css相当于Html的一个美化装置，所以它必须依赖于Html才能发挥作用，那么今天我们就来深入了解下它吧。...一、Css的用法 1.如何使用Css 要想使用Css来增加Html的美观，有三种方式： 1).头部文件中定义 标签的Css属性 2).导入Css文件 #创建一个...1)).设置轮廓颜色 div { outline-color:red } 2)).设置轮廓样式 div { outline-style:dotted } 和边框的风格是一样的 3))....设置轮廓宽度 div { outline-width:1px } 8).框模型Border Model ?...3)).对轮廓进行偏移outline-offset div { outline-offset:15px 轮廓与边框边缘的距离 } 21.元素是否可见Visibility div{ visibility
padding: 0.8rem 0.6rem; color: #f26135; font-size: 12px; background-color: transparent; outline...mac-chrome&safari Chrome下disabled文本颜色没有差异（Firefox下也没有差异），Safari下似乎有肉眼不可见的差异（放大n倍后能发现取色差异）。...去掉文本框默认样式： input, textarea { -webkit-appearance: none; -moz-appearance: none; outline: none;.../* remove highlight outline on samsung */ -webkit-tap-highlight-color: rgba(255, 255, 255, 0);...-webkit-user-modify: read-write-plaintext-only; } P.S.三星GT-S7562i（android4.0.4）下输入框获得焦点时，高亮黄框去不掉，不是outline
概述 你肯定知道，动画在创建引人注目的 Web 应用程序中扮演着重要的角色。...关键帧用于指示浏览器 CSS 属性在给定时间点上应有的 CSS 属性，然后填充空白。...animation-duration: 2300ms; /* 动画的运行次数 */ animation-iteration-count: infinite; /* 设置对象动画在循环中是否反向运动的方法...CSS 动画在某种程度仍然需要加浏览器前缀的，在 Safari、Safari Mobile 和 Android 中都使用了 -webkit。...随着时间增加，值等比增加，使用 linear 动效，会让动画不自然，一般来说，避免使用 linear 动效。
修改 outline-offset 到一个合适的负值 ，那么在恰当的时候，outline 边框就会向内缩进为一个加号。...： 容器得是个正方形 outline 边框本身的宽度不能太小 outline-offset 负值 x 的取值范围为: -(容器宽度的一半 + outline宽度的一半) < x < -(容器宽度的一半...+ outline宽度) ---- 在这个例子后，我又想，CSS 属性可以取负值的地方有很多。...下文就再介绍一些 CSS 负值有意思的使用场景。 单侧投影 先说单侧投影，关于 box-shadow，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下： ?...所以，动画在一开始的时刻就是下面这样： ? 以上述动画为例，一个被定义执行 3s 的动画，如果 animation-delay 为 -1s，起点相当于正常执行时，第2s（3-1）时的位置。
标题图 CSS3 完全向后兼容 选择器、框模型、背景和边框、文本效果、2D/3D转换、动画、多列布局、用户界面 ? CSS3.png ?...: width 2s; /* Opera */} CSS3 动画 @keyframes规则 多列 column-count属性规定元素应该被分隔成几列。...image.png CSS3 用户界面 div { resize:both; overflow:auto; } box-sizing 属性允许以确定的方式定义适应某个区域的具体内容。...margin:20px; width:150px; padding:10px; height:70px; border:2px solid black; outline...:2px solid pink; outline-offset:15px; } ?
border-bottom: 1px solid #ddd; } 阻止元素成为鼠标事件的target pointer-events 指定鼠标如何与元素进行交互，设置为none，阻止任何鼠标事件对其的作用...想要实现加号需要符合以下几点： 1.容器是个正方形 2.outline 边框的尺寸不能太小 3.outline-offset 的取值范围: -(容器宽度的一半 + outline宽度的一半) < x...outline: 50px solid #333; outline-offset: -99px; } mask属性 ?...除了IE不支持外，谷歌、火狐、Edge、Safari、Opera等主流的浏览器都支持该属性。...currentColor不是一个css属性，而是color的属性值，currentColor 返回当前元素继承的文字颜色。
animation-direction：设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。...缓动函数在动画中非常重要，它定义了动画在每一动画周期中执行的节奏。...在 CSS 中，支持一些缓动函数关键字。...background: #333; } 表现如下： 那么，加入 animation 之后，在不同的 animation-iteration-count 和 animation-direction 作用下...colorGreen 2s infinite; } @keyframes colorGreen { 0%, 100% { color: green; } } 在 Safari
-- ios7.0版本以后，safari上已看不到效果 --> 6、将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式 <meta name="apple-mobile-web-app-status-bar-style...button,input, textarea,select{ background: none; -webkit-tap-highlight-color:rgba(255,0,0,0); <em>outline</em>...border-box; -o-box-sizing: border-box; box-sizing: border-box; } /* 强制换行 */ .toWrap{ /* 只对英文起<em>作用</em>...*/ word-break: break-all; /* 只对英文起<em>作用</em>，以单词作为换行依据。*/ word-wrap: break-word; /* 只对中文起<em>作用</em>，强制换行。...{ display: -moz-box; -moz-box-direction: reverse; } /* <em>Safari</em>、Opera 以及 Chrome */ .<em>css</em> { display
鉴于时不时有童鞋翻我以前的沸点，因此，本文收集了个人目前发过的所有CSS知识点动图，以便阅读。 需要说明的是，顺序仍是按当时发布顺序罗列的，还没有系统的总结，多多包涵。...position:sticky，粘性定位要起作用，需要设置最后滞留位置。chrome有bug，firefox完美 ? 11.【相邻兄弟选择器】?相邻兄弟选择器之常用场景 ? 12.【模态框】?...【outline使用】?可以使用outline来描边，不占地方，它甚至可以在里面 ? 27【背景定位】?当固定背景不随元素滚动时，背景定位是相对于视口的 ? 28【tab-size】?...CSS可以设置动画开始前和结束时所保持的状态 ? 44【动画负延迟】?CSS动画可以设置延迟时间为负数，表示动画仿佛开始前就已经运行过了那么长时间 ? 45【过渡】?爱的魔力转圈圈 ?...CSS弹球动画效果的原理 ? 48【outline】?outline属性的妙用 ? 49【grid】?火狐浏览器grid布局检测器 ? 希望有所帮助。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
