这篇文章主要介绍了使用HTML5和CSS3表单验证功能,需要的朋友可以参考下客户端验证是网页客户端程序最常用的功能之一，我们之前使用了各种各样的js库来进行表单的验证。HTML5其实早已为我们提供了表单验证的功能。至于为啥没有流行起来估计是兼容性的问题还有就是样式太丑陋了吧。下面我们将来一步一步创造一个HTML5和CSS3的表单验证，只使用HTML和CSS。完成后的如下：第一步：整理验证字段和类型首先我们需要如下几个字段：姓名(fu...
CSS3 边框用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序，如Photoshop。在本章中，您将了解以下的边框属性：border-radiusbox-shadowborder-image浏览器支持属性浏览器支持Internet Explorer 9+ 支持 border-radius 和 box-shadow.Firefox, Chrome, 和 Safari 支持所有最新的 border 属性.注意： 前缀是-webkit-的Safari支持阴影边框。前缀是-o-的Opera支持边框图像。CSS3 圆角在CSS2中添加圆角棘手。...
这篇文章主要为大家详细介绍了CSS3弹性伸缩布局之flex布局，具有一定的参考价值，感兴趣的小伙伴们可以参考一下.container{align-items: center;justify-content: center;display: flex;background: white url(image/baby.jpg) no-repeat center;background-size: auto 100%; }.text{display: flex;align-items: center;height: 3rem;color: white;font-family: helvetica, sans-serif;font-size: 1.5rem;font-weight: bold;text-t...
Hello！前一篇文章给大家介绍了CSS3教程-2D 转换，不知道大家学的怎么样呢？接下来给大家介绍CSS3教程-3D 转换。3D 转换：CSS3 允许您使用 3D 转换来对元素进行格式化。在本文中，您将学到两种 3D 转换方法：rotateX()；rotateY()。它如何工作？转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持：Internet Explorer 10 和 Firefox 支持 3D 转换。Chrome 和 Safari 需要前缀 -webk...
今天呢，翠儿姐给大家讲解CSS3教程-边框的最后一种属性：border-image 属性。本文主要介绍了这款属性的定义以及用法，希望在前端开发工作中可以帮到需要帮助的同学。看一下具体实例：将图片规定为包围 div 元素的边框：div { -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 */ -o-border-image:url(border.png) 30 30 round; /* Opera */ border-image:url(border.png) 30 30 round; }浏览器支持：Internet Explo...
Hello！前端开发的小伙伴们，看完CSS3教程-边框的第1种属性，是不是很期待它的第二种box-shadow 属性呢？大家不要着急，前端开发网会给大家一一介绍的。首先我们先来看一个实例：向 div 元素添加 box-shadow：div { box-shadow: 10px 10px 5px #888888; }浏览器支持：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。定义和用法：box-shadow 属性向框添加一个或多个阴影。提示：请使用 border-image-* 属...
前一篇文章呢，我们给大家主要讲解了css3教程-边框，顺便简单的提了一下边框的3种属性，接下来翠儿姐给大家介绍css3教程-border-radius属性，这款属性是边框的属性之一，在前端开发工作中会经常用到。欢迎大家前来了解。给大家先看一个实例:向 div 元素添加圆角边框：div { border:2px solid; border-radius:25px; }浏览器支持：IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。定义和用法：border-radi...
前端开发的小伙伴们，你们知道css3教程中css3是怎样实现div的2d,3d旋转呢？这个过程是一个非常有趣的过程，大家不妨来学学。CSS3 转换：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。那么它是如何工作的？转换是使元素改变形状、尺寸和位置的一种效果。您可以使用 2D 或 3D 转换来转换您的元素。浏览器支持：Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webk...
CSS3提供了很多的设计上的新技术和高级功能，它给Web前端开发开发带来了革命性的影响，以前很多需要JavaScript才能实现的复杂效果，现在使用CSS3就能简单地实现。本文给大家介绍CSS3教程-文本效果，希望能帮助提高你的CSS技巧。CSS3 文本效果：CSS3 包含多个新的文本特性。在本文中，您将学到如下两种文本属性：1、text-shadowtext-shadow给文字加上阴影,利用css3属性增加文字的质感而不用使用任何图片。语法：text-shadow:h-shado...
Hello！前端开发的小伙伴们，感谢你们一直陪伴我，今天这篇CSS3教程-用户界面呢，是css3教程的最后一篇文章呢，希望大家可以学到真正实用的东西。CSS3为网站界面重新提供了独特的渲染属性，本文为大家详细介绍。CSS3 用户界面：在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。在本章中，您将学到以下用户界面属性：1、resize；2、box-sizing；3、outline-offset。浏览器支持：Firefox、Chrome 以及 Safari 支持...
前端开发的程序员们，你们对使用CSS3教程-@font-face实现个性化字体了解多少呢？今天我们给大家介绍CSS3 @font-face ，有兴趣的可以了解下。在网页中，我们可以用CSS的font-family属性来定义字体，然而定义的字体在用户的电脑上能否正确呈现则要看用户的电脑是否安装了该字体。我们经常能看到国外的一些个人网站使用了非常漂亮的字体，而这些字体通常在用户的电脑中是没有安装的，所以用font-family属性就无法实现了，今天我们就介...
前端开发的程序员们，每天给大家讲解一些关于CSS3教程的知识是多么开心的一件事啊，CSS3 包含多个新的背景属性，它们提供了对背景更强大的控制。在本文，您将学到以下两种背景属性：1、background-size；2、background-origin。您也将学到如何使用多重背景图片。浏览器支持我们首先来了解CSS3 background-size 属性:background-size 属性规定背景图片的尺寸。在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可...
Hello！小伙伴们，我们上一篇文章的CSS3教程-动画知识大家有没有消化完呢？CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB前端开发人员轻松的让文本呈现多列显示。CSS3 多列：通过 CSS3，您能够创建多个列来对文本进行布局 – 就像报纸那样！在本章中，您将学习如下多列属性：1、column-count；2、column-gap；3、column-rule。浏览器支持：Internet Explorer 10 和 Opera 支持...
或许你已经看过很多关于CSS3动画的技术，包括前端开发之前发表的一些，那么现在就请看一看CSS3教程-动画的基础知识吧。CSS3 动画：通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。CSS3 @keyframes 规则：如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。浏览器支...
前端开发的小伙伴么，我们又见面了。大家知道，在CSS2的世界中，过渡常常是非常单薄的，要么是从一种颜色变成另一种颜色、要么是从不透明变到透明，总而言之就是由一种状态变到另外一种状态。这就导致了很多页面给人的感觉很突兀，没有一个平滑的过渡。CSS3现在已经添加到了Webkit中，现在 Apple Safari 和 Google Chrome 都已经开始支持。再往前推几个月，那个时候人们还在争论是否将这些过渡写在CSS3中，一些人坚持认为过渡并不是...