
css3
江南风雨2013
qq987614679
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
tansform及transform-origin
transform-origin属性允许您改变被转换元素的位置。 transform-origin默认值为50% 50% 0; 就是中心。-----------------------------------------------------------------------------------------------------------------------------原创 2016-08-15 10:10:26 · 590 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
有没有觉得浏览器自带的原始滚动条很不美观,同时也有看到很多网站的自定义滚动条显得高端,就连chrome32.0开发板都抛弃了原始的滚动条,美观多了。那webkit浏览器是如何自定义滚动条的呢?前言webkit支持拥有overflow属性的区域,列表框,下拉菜单,textarea的滚动条自定义样式,所以用处还是挺大的。当然,兼容所有浏览器的滚动条样式目前是不存在的。演示转载 2017-11-22 18:09:53 · 475 阅读 · 0 评论 -
CSS Grid布局:合并单元格布局
《CSS Grid布局:网格单元格布局》一文中通过一些简单的实例介绍了如何给容器定义网格,并且怎么使用网格线或者网格区域来实现单元格这样的简单的布局。在文章结尾之处也提到过,这样的单元格如同表格一样,仅仅一个个独立的单元格是无法满足一些复杂的Web布局,我们需要将多个单元格合并在一起,拼装成一个稍为复杂一点的布局。简单点说,就是由单元格慢慢过渡到具有合并单元格的布局(在脑海中想想曾经爱过的tabl转载 2016-12-05 20:18:36 · 7956 阅读 · 0 评论 -
CSS Grid布局教程之网格单元格布局
本文通过各种实例向大家阐述CSS Grid布局,让我们一起领略其强大的魅力,需要的朋友可以参考下CSS Grid布局对于我等来说就是一个全新的布局,但国外很多同行朋友已对这种布局做了全面的探知。前面花了两篇内容(《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》)为这篇文章做足了铺垫。或许你想知道的是如何使用?各位看转载 2016-12-05 20:15:18 · 680 阅读 · 0 评论 -
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
在这篇文章中,主要向大家介绍如何让自己的浏览器支持CSS Grid Layout模块功能,需要的朋友可以参考下上一篇《CSS Grid布局教程之什么是网格布局》中简单介绍了什么是CSS Grid Layout以及一些概念和术语,为后续学习和使用CSS Grid Layout做了一些铺垫。但浏览器对CSS Grid Layout到目前为止各浏览器厂端支持程度不一致,致使无法全面使用,就算转载 2016-12-05 19:30:34 · 976 阅读 · 0 评论 -
css grid布局教程之什么是网格布局?
在这篇文章中简单的介绍了CSS Grid Layout,以及为什么要使用他,并且介绍了其一些术语:网格线、网格轨道、网格单元格、网格区域和网格容器等,为后面如何学习和使用CSS Grid Layout做了一个铺垫。SS Grid现在已经被W3C纳入到CSS3的一个布局模块当中,被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格,也就是早期的9转载 2016-12-05 19:10:36 · 1387 阅读 · 0 评论 -
text-shadow
一、text-shadowtext-shadow: h-shadow v-shadow blur color;text-shadow: 水平阴影 垂直阴影 模糊半径 color;h-shadow和v-shadow可取负值,blur只能取正值。二、使用1、基础style type="text/css">.blur{ text-shad转载 2016-11-01 11:00:38 · 2888 阅读 · 0 评论 -
矩阵matrix和transform-origin
五、矩阵matrixmatrix(, , , , , ):以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵。就是基于水平方向和垂直方向重新定位元素。SVG,css3,html5的canvas中都有矩阵变换,接下来简单说说。一个元素渲染后就可以得到一张位图,然后对这个位图上每一点进行变换,就可以得到新转载 2016-11-01 10:38:27 · 2956 阅读 · 0 评论 -
css3中变形和动画(三)
随笔 - 167 文章 - 0 评论 - 289css3中变形与动画(三)transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关。本文就介绍animation属性。animation属性通过一些关键帧中元素属性的改变来实现动画效果转载 2016-11-01 09:45:48 · 417 阅读 · 0 评论 -
CSS3的calc()使用
calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一转载 2016-10-08 18:11:07 · 459 阅读 · 0 评论 -
css3线性渐变(linear-gradient)
转自:http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html,谢谢~ 。作者是一个资深的老博客,可前去阅读CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用 C转载 2016-10-17 17:39:08 · 407 阅读 · 0 评论 -
SASS、SCSS和css的关系
搜索了一下,发现国内很少人认识SASS和SCSS,故在此介绍一下他们。SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。 SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。 例如:-------转载 2016-10-17 11:04:39 · 12133 阅读 · 0 评论 -
css实现兼容性的渐变(gradient)效果
一、有点俗态的开场白要是两年前,实现“兼容性的渐变效果”这个说法估计不会被提出来的,那个时候,说起渐变背景,想到的多半是IE的渐变滤镜,其他浏览器尚未支持,但是,在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果。在众多的浏览器中,目前不支持Opera浏览器。本文实例效果都是同样的效果,就是垂直渐变,起始颜色红色,结束转载 2016-10-13 15:19:44 · 441 阅读 · 0 评论 -
css 两行省略
没有找不到,只有想不到,有了信息的想法就去搜,可能已经有人实现了的呢-------------------------首先,要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性,需要记得。但是第三条属性...转载 2018-07-31 20:00:14 · 1436 阅读 · 0 评论