随笔分类 -  css3

css3之 过渡
摘要:早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化,让效果显得更加细腻。简单点说,就是通过鼠标的单击、获得焦点,被点击或对元素任何改变中触发,并平滑地以动画效果改变 阅读全文
posted @ 2017-06-16 10:26 坚持不懈❥ 阅读(159) 评论(0) 推荐(0)
css3之2D 转换
摘要:浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 Chrome 和 Safari 要求前缀 -webkit- 版本.Internet Explorer 10, Firefox, 和 Op 阅读全文
posted @ 2017-06-15 17:52 坚持不懈❥ 阅读(191) 评论(0) 推荐(0)
css3之背景background-origin,background-clip,background-size
摘要:background-origin属性指定了背景图像的位置区域。 content-box, padding-box,和 border-box区域内可以放置背景图像。 background-clip用来将背景图片做适当的裁剪以适应实际需要。 效果 background-size 指定背景图像的大小: 阅读全文
posted @ 2017-06-15 10:43 坚持不懈❥ 阅读(212) 评论(0) 推荐(0)
css3之字体@font-face
摘要:@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体 阅读全文
posted @ 2017-06-14 17:48 坚持不懈❥ 阅读(160) 评论(0) 推荐(0)
css3之文本text-overflow 与 word-wrap, word-break
摘要:CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容 语法: 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow 阅读全文
posted @ 2017-06-14 17:29 坚持不懈❥ 阅读(192) 评论(0) 推荐(0)
css3之 渐变
摘要:CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的 阅读全文
posted @ 2017-06-14 16:50 坚持不懈❥ 阅读(258) 评论(0) 推荐(0)
css3之圆角
摘要:浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 -webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。 CSS3 border-radius 属性 使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。 CSS3 border-radiu 阅读全文
posted @ 2017-06-14 11:54 坚持不懈❥ 阅读(237) 评论(0) 推荐(0)
css3之border-image
摘要:顾名思义就是为边框应用背景图片,它和我们常用的background属性比较相似。 我们把上图当作边框图片 来应用一下, 看一看是什么效果 根据border-image的语法: 边角部分为裁掉了,可见repeat就是一直重复,然后超出部分剪裁掉,而且是居中开始重复。 Round 参数:Round可以理 阅读全文
posted @ 2016-09-29 16:42 坚持不懈❥ 阅读(234) 评论(0) 推荐(0)
css3之弹性盒模型(Flex Box)
摘要:CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的 阅读全文
posted @ 2016-09-29 14:30 坚持不懈❥ 阅读(283) 评论(0) 推荐(0)
css3之文本和颜色功能之text-overflow,word-wrap
摘要:语法 clip修剪文本。ellipsis显示省略符号来代表被修剪的文本.string使用给定的字符串来代表被修剪的文本。 效果: word-wrap语法 阅读全文
posted @ 2016-09-28 16:19 坚持不懈❥ 阅读(214) 评论(0) 推荐(0)
css3之文本和颜色功能之text-shadow
摘要:总本看一下 语法:text-shadow: h-shadow v-shadow blur color; demo: 1.text-shaow属性接受以逗号分隔的阴影效果,燃烧的文字 效果: 2.3D效果 效果: 还可以设置凹体效果 3.Blurytext Effect(模糊效果) 4.Vintge/ 阅读全文
posted @ 2016-09-28 15:51 坚持不懈❥ 阅读(1081) 评论(0) 推荐(0)
css3之属性选择器
摘要:总体来看一下都有哪些选择器 1.属性选择器 1)[att*=val] 2)[att^=val] 3)[att$=val] 2.结构伪类选择器 3.UI伪类选择器 其中E:read-only伪类选择器用来指定当元素处于只读状态时的样式。 其中E:read-white伪类选择器用来指定当元素处于非只读状 阅读全文
posted @ 2016-09-28 12:06 坚持不懈❥ 阅读(246) 评论(0) 推荐(0)
css3新特性概览
摘要:一.特性 css3允许背景属性设置多个属性值,如:background-image,background-repeat,background-size,background-position等。 我感觉这是css3中特别给力的新属性呀,不用再切那么多图了:border-radius border-i 阅读全文
posted @ 2016-09-27 16:09 坚持不懈❥ 阅读(183) 评论(0) 推荐(0)