css3
CURRY_zhao
风已住,用技能改变生活
展开
-
修改element $prompt的文字样式
代码如下this.$prompt('确认重置吗? 您需要输入 <strong>重置</strong> 确认操作', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', inputPattern: /^重置$/, inputErrorMessage: '请输入正确的确认信息', dangerouslyUseHTMLString: true, custo原创 2021-06-18 16:03:54 · 3909 阅读 · 5 评论 -
移动端IOS滚动条卡顿现象
使用overflow-y:scroll在IOS端总会出现卡顿的滚动现象解决方案加入如下两句-webkit-overflow-scrolling: touch; //有回弹效果-webkit-overflow-scrolling: auto; //滑到哪停到哪...原创 2019-01-03 15:35:00 · 1413 阅读 · 0 评论 -
使用input,type=radio,赋初值不成功的问题;异步调取初步尝试
解决办法有两种,第一种是给input包一层form,第二种是通过js改变其值,就是那句props。原创 2018-10-23 11:19:50 · 1142 阅读 · 1 评论 -
使用popover不能与span同行的问题
一个比较简单的样式处理<span>射雕英雄传:</span><el-popover placement="top-start" title="标题" width="200" trigger="hover" content="我想要靖哥哥那完美的爱情,我不会武功"> &原创 2018-10-20 17:12:52 · 927 阅读 · 0 评论 -
盒子水平垂直居中方法
1、定位 盒子宽高已知, position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;2、table-cell布局 父级 display: table-cell; vertical-align: middle; 子级 margin: 0 auto;3、定位 + transform ; ...转载 2018-02-28 18:14:57 · 500 阅读 · 0 评论 -
带你入门 CSS Grid 布局
原文:Getting Started with CSS Grid作者:ROBIN RENDLE译者:LeviDing声明:转载请注明出处,保留原文链接和作者等相关信息。三月中旬的时候,有一个对于 CSS 开发者来说很重要的消息,最新版的 Firefox 和 Chrome 已经正式支 CSS Grid 这一新特性啦。没错:我们现在就可以在最流行的两大浏览器上玩转 CSS转载 2017-05-08 15:59:48 · 2695 阅读 · 0 评论 -
css !important在css样式中主要是为了实现css代码的优先级别
css !important在css样式中主要是为了实现css代码的优先级别,主要写在样式规则之后: 比如说: {color:#fff!important;}. 一般css里面的优先级别规则都是按级层覆盖 然而使用!important可以改变优先级别为最高。 这打破了我们之前覆盖平衡,优先于正常的css规则。 这个标记在我们的浏览器中也出现了css hack,最重要的转载 2016-10-10 15:18:09 · 692 阅读 · 0 评论 -
LESS知识学习
综述LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。本文部分内容参考官方文档编译器建议使用Koala编译器下载地址LE转载 2016-12-21 15:31:35 · 530 阅读 · 0 评论 -
less动态样式语言CSS框架简介
简 介LESS是一种由Alexis Sellier设计的动态层叠样式表语言,受Sass所影响,同时也影响了Sass的新语法:SCSS。 LESS是开源的,其第一个版本由Ruby写成,但在后续的版本当中,Ruby逐渐被替换为JavaScript。受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。转载 2016-12-21 15:07:01 · 1386 阅读 · 0 评论 -
display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始; 高度,行高以及顶和底边距都可控制; 宽度缺省是它的容器的100%,除非设定一个宽度 , , , , 和 是块元素的例子。 display:inline就是将元素显示为行内元素. inline元素的特点是: 和其他元素都在一行上;转载 2016-12-06 15:40:21 · 259 阅读 · 0 评论 -
css Sprties的使用,帮你更好的选择图片
这段时间有几次接触到了css sprites的概念,一个就是在用css做滑动门的时候,另外一个就是在用YSlow分析网站性能的时候,于是对css sprites这个概念产生了浓厚的兴趣。在网上查找了很多的资料,但可惜的是大部分都是只言片语,其中很多都是直接翻译国外的资料,也有直接推荐国外的资料网站,无奈英语没有过关,基本上没有理解到什么css sprites,更别谈如何使用了。最后还是在蓝转载 2016-12-05 19:15:21 · 494 阅读 · 0 评论 -
css sprite 坐标定位为何为负以及定位方法
用这个的时候,关于最后的 background-position 属性2个参数理解出了偏差,网上很多地方都没解释清楚。特意查了下了解清楚(源于脚本之家)。说说原理先:CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景转载 2016-12-10 18:12:22 · 2740 阅读 · 0 评论 -
IE中的CSS3不完全兼容方案
到Internet Explorer 8为止,IE系列是不支持CSS3的。在IE中要做一些常用的效果如圆角、阴影,就需要用一些冗余而无意义的元素和图片来做出这些效果。在厌倦这些后,就 想着用更为简洁、直接有效、CSS3式的办法来解决这些问题。好在就算是饱受批评的Internet Explorer,其本身也是足够强大的。IE特有的技术可以很好的实现一些CSS3的效果。Opacity透明度转载 2016-11-29 15:55:34 · 752 阅读 · 0 评论 -
css 中的!important为优先级的确定
css !important在css样式中主要是为了实现css代码的优先级别,主要写在样式规则之后:比如说: {color:#fff!important;}. 一般css里面的优先级别规则都是按级层覆盖 然而使用!important可以改变优先级别为最高。 这打破了我们之前覆盖平衡,优先于正常的css规则。 这个标记在我们的浏览器中也出现了cs转载 2016-11-29 15:51:36 · 2097 阅读 · 0 评论 -
HTML5新特性:范围样式<style scoped>
Chromium最近实现了一个HTML5的新特性:范围样式,又叫做。开发者可以通过为根元素设定一个添加了scoped属性的style标签,来限制样式只作用于style标签的子元素上。这会限制样式只影响style标签的父元素和它所有的后代元素。例子下面是一个使用了标准样式的简单页面: a div! a span! div { c转载 2016-11-29 14:02:14 · 1001 阅读 · 0 评论 -
CSS中一些利用伪类、伪元素和相邻元素选择器的技巧实现评论点赞
前几天遇到一个页面需求是这样的:一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。需求:没有文字,没有聚焦——点赞没有文字,聚焦——灰色发送有文字——红色发送如果用JS实现,需要监听输入框的change和focus事件,比较麻烦。但是用CSS中的伪类就可以实现相近效果。"text" cl转载 2016-10-18 17:29:14 · 858 阅读 · 0 评论 -
less css框架简介
简介CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中。HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义。作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因转载 2016-10-18 17:18:04 · 330 阅读 · 0 评论 -
::before和::after的用法 css伪元素
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。Creative Button Styles转载 2016-11-08 14:12:38 · 3270 阅读 · 0 评论 -
css3学习笔记
一、布局相关样式用float属性或position属性进行页面布局,两个div元素是各自独立的,如果在第一个div中加入内容会使两个元素的底部不能对齐。1、多栏布局:注意浏览器的兼容性column-count 设置栏数。column-width 单独设每一栏的宽度而不设定元素的宽度。column-gap 设置多栏之间的间隔距离。column-rule在栏原创 2016-09-08 14:49:17 · 405 阅读 · 0 评论