css3
文章平均质量分 85
四哥-云上
大学之道,在明明德,在亲民,在止于至善!
展开
-
CSS3简介
CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。CSS3 实例div{transform:rotate(30deg);}尝试一下 »点击 "尝试一下" 按钮查看在线实例。CSS3 参考手册在这里,我们提供完整的 CSS3 参考手册,包括所有属性和选择器的语原创 2016-05-27 21:54:51 · 210 阅读 · 0 评论 -
css3五花八门渐变之径向渐变【完美光晕效果】
CSS3 渐变(Gradients)CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐原创 2016-07-20 17:29:21 · 3160 阅读 · 0 评论 -
CSS3 文本效果 小清新风来 【卡片效果:box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);】
CSS3 文本效果CSS3中包含几个新的文本特征。在本章中您将了解以下文本属性:text-shadowbox-shadowtext-overflowword-wrapword-break浏览器支持属性 text-shadow4.010.0原创 2016-07-20 17:42:15 · 4393 阅读 · 0 评论 -
CSS3 字体【@font-size使用全攻略-配合font squirrel】
篇1:CSS3 字体CSS3 @font-face 规则以前CSS3的版本,网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3,网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。原创 2016-07-21 10:02:11 · 1592 阅读 · 0 评论 -
CSS3 2D 转换【旋转transform:rotate(30deg); 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】
CSS3 2D 转换CSS3 转换CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。它是如何工作?变换的效果,让某个元素改变形状,大小和位置。您可以转换您使用2D或3D元素。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的原创 2016-07-21 10:28:58 · 2366 阅读 · 0 评论 -
css3 过渡【3600度的自由旋转,同时变大,变色】
CSS3 过渡CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。用鼠标移过下面的元素:用鼠标移过下面的元素:CSS3Transition浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前原创 2016-07-21 16:17:48 · 1646 阅读 · 0 评论 -
css3 动画【永久动画 运动 变色 过渡】兼容处理
CSS3 animation-iteration-count 属性实例播放三次动画:animation-iteration-count:3;-webkit-animation-iteration-count:3; /*Safari and Chrome*/尝试一下 »浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。原创 2016-07-21 16:35:39 · 1417 阅读 · 0 评论 -
CSS3 多列【column-count :3 分3列;column-gap:40px 列间距; column-rule: 1px solid lightblue;指定列边框样式】
CSS3 多列CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编原创 2016-07-21 16:52:21 · 885 阅读 · 0 评论 -
CSS3 用户界面【resize,指定是否允许用户调整大小;box-sizing,指定什么方式适应某个区域大小;outline-offset,指定对轮廓偏移和超出边缘位置设定轮廓】
CSS3 用户界面CSS3 用户界面在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。在本章中,您将了解以下的用户界面属性:resizebox-sizingoutline-offset浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在 -webkit-, -ms- 或 -moz-原创 2016-07-21 17:06:36 · 1886 阅读 · 0 评论 -
css3图片【缩略图效果:设置border和padding;响应式图片:width:100%;height:auto;卡片式图片:设置文字的各种绝对定位;滤镜效果;响应式图片相册@media;模态窗】
CSS 图片本章节将为大家介绍如何使用 CSS 来布局图片。圆角图片实例圆角图片:img { border-radius: 8px;}尝试一下 »实例椭圆形图片:img { border-radius: 50%;}尝试一下 »缩略图我们使用 border原创 2016-07-21 17:40:02 · 622 阅读 · 0 评论 -
CSS 按钮 各种按钮效果大荟萃【过渡变色效果:transition-duration 属性来设置 "hover" 效果的速度;按钮动画效果,transition加上after伪类】
CSS 按钮本章节我们为大家介绍使用 CSS 来制作按钮。基本按钮样式默认按钮 CSS 按钮CSS 实例.button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px;原创 2016-07-22 09:32:43 · 1215 阅读 · 0 评论 -
css多背景图设置, 【background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 】
CSS3 背景CSS3中包含几个新的背景属性,提供更大背景元素控制。在本章您将了解以下背景属性:background-imagebackground-sizebackground-originbackground-clip您还将学习如何使用多重背景图像。浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号。紧跟在原创 2016-07-20 13:42:27 · 3332 阅读 · 0 评论 -
css3各种你不知道的圆角大杂烩【border-radius: 15px 50px:】【文章内图像看不到效果,直接看代码】
CSS3 圆角CSS3 圆角使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角"。CSS3 圆角制作器浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。-webkit- 或 -moz- 前面的数字表示支持该前缀的第一个版本。属性原创 2016-07-20 09:47:55 · 228 阅读 · 0 评论 -
7款外观迷人的HTML5/CSS3 3D特效按钮特效
下面我整理了7款外观都十分迷人的HTML5/CSS3 3D按钮特效,有几个还挺实用的,分享给大家。1、CSS3超酷3D弹性按钮 按钮实现非常简单之前我们分享过几款不错的CSS3 3D立体按钮,比如5组可爱CSS3按钮、CSS3灰色按钮菜单 超具3D立体感等。今天我又要向大家分享一款实现超级简单的CSS3 3D弹性按钮,它在鼠标按下时不仅从视觉上感受到3D立体的效果,而且更有转载 2016-06-13 09:16:48 · 346 阅读 · 0 评论 -
css3 统一框大小 box-sizing:border-box; 【在同一元素的width和height中包含内边距和边框】
CSS3 框大小#div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: content-box; } #div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: content-box;原创 2016-07-22 11:56:08 · 1074 阅读 · 0 评论 -
各种图片特效,你想要吗?你不是真的想要吧?【纯CSS实现】
html部分: Hover Effect Ideas An inspirational collection of subtle hover effects Set 1 Set 2 Julia原创 2016-06-14 13:08:45 · 470 阅读 · 1 评论 -
css3 弹性盒子 Flex Box 完整攻略
CSS3 弹性盒子(Flex Box)弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。浏览器支持表格中的数字表示支持原创 2016-07-25 16:29:15 · 503 阅读 · 0 评论 -
秒懂相对定位与绝对定位,【组合拳relative,absolute】 瞬间清醒有木有?
上文:组合拳层级关系为:效果图:为改变参照物(橘色框)后的效果层级关系为:效果图:参照物为最顶级的元素情况。层级关系为:效果图: 仅使用margin属性布局绝对定位元素的情况此情况,margin-bottom 和margin-right的值原创 2016-07-04 09:31:12 · 2833 阅读 · 1 评论 -
css3多媒体查询及实例
CSS3 多媒体查询CSS2 多媒体类型@media 规则在 CSS2 中有介绍,针对不同媒体类型可以定制不同的样式规则。例如:你可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则。但是这些多媒体类型在很多设备上支持还不够友好。CSS3 多媒体查询CSS3 的多媒体查询继承了 CSS2 多媒体类型的所有思想:原创 2016-07-26 15:39:55 · 557 阅读 · 0 评论 -
CSS3 边框 【border-radius:设置圆角;boder-image:设置边框图片;box-shadow:设置阴影效果】
CSS3 边框CSS3 边框用CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如Photoshop。在本章中,您将了解以下的边框属性:border-radiusbox-shadowborder-imageCSS3 圆角在CSS2中添加圆角棘手。我们不得不在每个角落使用不同的图像。在CSS原创 2016-07-20 09:35:48 · 1430 阅读 · 0 评论 -
css3分页paginationg【各种分页效果】
CSS 分页实例本章节我们将为大家介绍如何通过使用 CSS 来创建分页的实例。简单分页如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航。以下实例演示了如何使用 HTML 和 CSS 来创建分页:CSS 实例ul.pagination { display: inline-block; padding: 0;原创 2016-07-22 09:42:54 · 952 阅读 · 0 评论