本文参考自:https://www.cnblogs.com/libin-1/p/5903350.html
WebKit特有属性
-webkit-mask
这个属性是相当强大的,所以详细的介绍超出了本文的范畴,它非常值得深入研究,因为它可以在实际应用中为你省掉很多时间。
-webkit-mask让为一个元素添加蒙板成为可能,从而你可以创建任意形状的花样。蒙板可以是CSS3渐变或者半透明的PNG图片。蒙板元素的alpha值为0的时候会覆盖下面的元素,为1的时候会完全显示下面的内容。相关的属性有-webkit-mask-clip、 -webkit-mask-position 和-webkit-mask-repeat等,严重依赖来自于background中的语法。更多信息请查看webkit的博客和下面的链接。
示例
图片蒙板:
1 2 3 4 |
.element{ background: url(img/image.jpg) repeat; -webkit-mask: url(img/mask.png); } |
示例
渐变蒙板:
1 2 3 4 |
.element2 { background: url(img/image.jpg) repeat; -webkit-mask: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); } |
扩展阅读: Safari Developer Library
-webkit-text-stroke
CSS边框的一个不足就是只有矩形的元素才能使用。-webkit-text-stroke可以为文字添加边框。它不但可以设置文字边框的宽度,也能设置其颜色。而且,配合使用color: transparent属性,你还可以创建镂空的字体!
示例
为所有的<h1>标题设定一个2px宽的蓝色边框:
1 |
h1 {-webkit-text-stroke: 2px blue} |
另一个特性是,通过设定1px的透明边框,可以让文字变得平滑:
1 |
h2 {-webkit-text-stroke: 1px transparent} |
创建红色镂空字体:
1 2 3 4 |
h3 { color: transparent; -webkit-text-stroke: 4px red; } |
扩展阅读: Safari Developer Library
-webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。
想要禁用这个高亮,设置颜色的alpha值为0即可。
示例
设置高亮色为50%透明的红色:
1 |
-webkit-tap-highlight-color: rgba(255,0,0,0.5); |
浏览器支持: 只有iOS(iPhone和iPad).
zoom: reset
通常来说,zoom是一个IE专用的属性。但是webkit也开始支持它了,而且使用值reset,webkit可以实现不错的效果(有趣的是,IE不支持这个值)。它让你重设掉浏览器中正常的缩放行为——如果某个元素被声明了zoom:reset,页面上的其它元素在用户放大页面的时候都会跟着放大。
注:其实,我们常用来禁用chrome强制字体大小的时候用到的-webkit-text-size-adjust:none;也是可以实现类似的效果,不同的是,设置该属性的元素内的文字不会被放大/缩小,但是页面上的其它元素则会变化——神飞
text-overflow
采用CSS3和text-overflow: ellipsis,如果文字比它的容器的宽度要长的话,你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。不幸的是,Firefox不支持这个属性,但是貌似在最近的版本中将会提供支持。
示例
1 2 3 4 |
div { width: 100px; text-overflow: ellipsis; } |
浏览器支持: CSS 3,所有浏览器的最新版本,除了Firefox,IE从IE6开始支持,据说Firefox到6.0也会提供支持的——希望如此吧。
word-wrap
当文字在一个比较窄的容器中时,它的某个部分可能会因为太长而不能正确的换行。比如链接就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字,那么你就可以设置 word-wrap 为break-word,它可以让字符串在到达容器的宽度限制时换行。
示例
1 2 3 4 |
div { width: 50px; word-wrap: break-word; } |
将width设置为100%,文字或字母会随宽度自动断行。
浏览器支持: CSS 3,所有现代浏览器。
transform: rotateX/transform: rotateY
如果你已经开始使用CSS3,那么你可能会比较熟悉transform: rotate(),这个在z轴上旋转元素的属性。
但是你是否也知道,它也可以更深入的旋转的(比如,围绕x轴和y轴)? 这些变形结合-webkit-backface-visibility: hidden会更合适。
示例
如果你鼠标经过这个元素,它将会旋转180°,倒转过来:
1 2 3 |
div:hover { transform: rotateY(180deg); } |
小技巧:如果只是映射一个元素,你可以设置transform为rotateX(180deg) (对应rotateY)或者设置transform 为scaleX(-1) (对应scaleY).
浏览器支持: CSS3, WebKit、firefox、Opera以及IE9
相关推荐
自己整理的部分HTML的元素属性用法和一些css样式
CSS属性解释,常见的CSS属性,还包括DIV+CSS常属性
CSS语法由三部分构成:选择器、属性和值: selector {property: value} CSS3 是最新的 CSS 标准。 css3比css多了一些样式设置而已。 css3是向前兼容的,也就是说,css中有效的code在css3也有效。 一个css与css3...
内容涵盖CSS2.1和大部分CSS3。 绝非苏沈小雨版的CSS2.0手册,前端开发必备。 列举手册的几个特征: 内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持...
background 简写属性,作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。Scroll随文滚动 background-color 设置元素的背景颜色。 background-image 把...
网页设计第3课CSS的三种引用方法及CSS部分属性.pdf
让IE 6,7,8支持CSS3的部分属性。它可以让低版本IE浏览器支持CSS3的border-radius、box-shadow、border-image、CSS3 Backgrounds (-pie-background)、Gradients、RGBA属性。
本文档为pdf格式文件,里面是一张思维导图,总结了CSS常用属性和值以及其他的特点。有助于学习者很快的额理清楚这部分的知识架构,文档清淅明了简单易懂。花了好大功夫写的,很详细的,欢迎下载哈。
一些由HTML5/CSS3编写实现的按钮特效,全部是一些圆角的按钮效果,看上去挺有美感的,还有鼠标悬停特效,放在按钮上,按钮背景会有轻微变化,满足操作时的响应功能,因使用有CSS3部分属性,因此测试请使用火狐或...
本书包含html5和css3两部分,除了完整包含html5所有元素以及两种语法格式的详细介绍外,还包含css3所有语法和样式属性的详细介绍。 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度 每个属性及其它相关内容都有可浏览的DEMO示例 手册的在线版也适当的使用了一些CSS3,感兴趣的朋友...
第二部分:详细地介绍了CSS 3的绝大部分常用选择器、属性,并为这些 选择器、属性提供了示例,方便广大读者参考本书全面、系统地掌握CSS 3的 功能和用法。这部分内容也可以作为前端开发者的参考手册。 第三部分:...
第 1-10章为第 1部分,依次讲解了 Web开发标准与网页网站制作,Web标准布局的本质、XHTML书写规范、CSS基础与书写规范、网页头部元素的详细定义、CSS基本布局属性、CSS容器属性、CSS定义文本属性、元素的修饰和 CSS...
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分:第1部分是HTML/CSS基础和CSS 3新特性演示,涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
这次我们要来分享一组纯CSS3打造的动画图标,总共100多个,每一个图标没有用图片,而是利用CSS3的相关特性来实现。在这些CSS3图标中,有部分是动态的,这些带动画的图标也是利用CSS3的动画属性实现的。
李刚 疯狂HTML5CSS3JavaScript讲义的源代码 第一部分 第1章 HTML 5简介 第2章 HTML 5的常用元素与属性 第3章 HTML 5表单相关元素和属性 第4章 HTML 5的绘图支持 第5章 HTML 5的多媒体支持 第二部分 第6章 ...
里面简述了一些css2的属性和各属性的用法 并且在大部分都有一些小的例子来验证用法
一个学习Div+Css挺好的一个文档,其中有很多的部分都做了浓缩的
overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来; 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto; overflow:auto 属性如果超出就出现...