css3
ImpulsionAndpower
初学者,一天进步一点
展开
-
CSS3自定义滚动条样式 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?前言webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。演示转载 2017-09-13 14:41:37 · 378 阅读 · 0 评论 -
用css画三角形(提示框三角形)
(1)有边框的三角形我们来写下带边框的三角形。如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法。最容易想到的,是叠加层。思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色;内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。这里就涉及到...转载 2018-07-18 15:30:07 · 9038 阅读 · 0 评论 -
CSS3中的div,section,article的区别
div:在任何框架中,div始终是div,不管你是什么,都可以使用div,咱的功能就是自成个钩子方便添加样式。section:当然既然可以用section,那这部分内容就一定也可以使用section,section中文就是:节,部分的意思,文章的目录,大纲最适合使用。section里一般都会有一个标题。article:article是section的升级版,一段内容已具备section中的标题时,...转载 2018-05-30 10:25:05 · 4559 阅读 · 0 评论 -
CSS3中text-overflow支持以...代替超出文本
CSS3中text-overflow支持以...代替超出文本。 1.div1:默认状态。超出文本默认显示在div外 2.div2:text-overflow:ellipsis; 使用text-overflow以...代理超出文本 3.div3:如果文本换行被设置为默认(white-space:normal),不会出现超出文本被替代的情况。所以如果文本是块状结构,不能使转载 2017-10-26 16:20:23 · 1445 阅读 · 0 评论 -
自定义input[type="checkbox"]的样式
对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现。如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用。不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式。很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbo转载 2017-10-13 09:26:49 · 1429 阅读 · 0 评论 -
css3属性-webkit-font-smoothing
对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天,抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中,后由于某些原因从web标准中被移除了。但是,我们可以用以下两种定义进行抗锯齿渲染-webkit-font-smoothing: antialiased; /*chrome、safari*/-转载 2017-10-13 09:12:43 · 8806 阅读 · 1 评论 -
css3动画属性详解之transform、transition、animation
css3动画属性详解:关于CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)。一、transform属性:旋转rotate(中心为原点)扭曲、倾斜skew(skew(x,y), skewX(x), skewY(y))缩放scale(scale(x,y), scaleX(x), scaleY转载 2017-10-11 17:14:01 · 1733 阅读 · 1 评论 -
flex布局中对齐项目和对齐内容的区别
(效果的话直接去看最下面的图)对齐项align-items属性适用于所有Flex容器,并设置Flex项目沿着每条flex 线的交叉轴的默认对齐方式。对齐项属性适用于所有的柔性容器,它是用来设置每个柔性元素在侧轴上的默认对齐方式。 还有一位回答者的回答也很好,如下对齐项具有与对齐内容相同的功能,但不同之处在于它可以使每个单行容器居中,而不是使整个容转载 2017-10-11 15:04:46 · 7941 阅读 · 0 评论 -
CSS3弹性布局内容对齐(justify-content)属性使用详解
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配,也会在发生内容溢出时影响项目的对齐。注意:弹性布局中有两个基本术语main axis和cross axis,一般情况下,我们可以把它们各自看作是屏幕上的行向和列向(但是严格讲,这和写模转载 2017-10-11 14:57:29 · 673 阅读 · 0 评论 -
css-组合选择器
CSS中组合选择器,算是基础选择器的升级版,也就是组合去使用基础选择器的意思,因为配合一些 CSS 的专有语法,所以初学者比较难看懂,下面枚举几个常用的选择器作为例子,略谈一下CSS的组合选择器的使用。基础一定要扎实的去学。这里有张表格,算是以下例子的索引:组合选择器列表选择器含义示例A,B多个元素选择转载 2017-08-30 16:24:00 · 681 阅读 · 0 评论 -
CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解
一)-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮,设置颜色的alpha值为0即可。示例:设置高亮转载 2017-08-28 15:59:45 · 1212 阅读 · 0 评论 -
盒子居中方法
布局中经常会遇到让一个盒子水平且垂直居中的情况,以下总结了几种居中方法:margin固定宽高居中 负margin居中 绝对定位居中 table-cell居中 flex居中 transform居中 不确定宽高居中(绝对定位百分数) button居中不兼容IE低版本的可以用其他方法hack。不多说,直接上代码:大多数方法的html都相同,所以写一个了,不同的再单独写出来。...转载 2018-07-30 10:40:56 · 1308 阅读 · 0 评论