在线演示本地下载原文:https://www.cnblogs.com/qixidi/p/10079584.html
如今,这种利用CSS制作圆角的技术已经得到了大多数主流浏览器的支持,包括Safari,谷歌浏览器,IE,Opera和火狐浏览器。下面让我们来看看border-radius的语法,解释,以及IE是如何支持它的。语法和说明在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似:复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都为10px。你也可...
http://files.cnblogs.com/xinlinux/csshake.min.css <div class="shake">AAA</div><div class="shake shake-hard">AAA</div><div class="shake shake-slow">AAA</div><div class="shake shake-little">AAA</div><div class="shake shake-horizontal">AAA</div><div class="shake shake.vertical">AAA</div><div class="shake shake-rotate">AAA</div><div class="shake shake-opacity">AAA</div><div class="shake shake-crazy...
第四章 文本1、<p></p>2、<small></small>表示细则一类的旁注,通常包括免责声明、注意事项、法律限制、版权信息等。3、<strong></strong>表示内容的重要性,以粗体显示,一个strong可以嵌套在另一个strong中;<em></em>表示内容的着重点,以斜体显示,一个em可以嵌套在另一个em中。<b></b>用于如文档摘要里的关键词、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等;<i></i>用于如分类名称、技术术语、外语里...
1.单独指定第一个子元素、最后一个子元素的样式<style type="text/css">li:first-child{ background:yellow;}li:last-child{ background:blue;}</style> 2.对指定序号的子元素使用样式<style type="text/css">li:nty-child(2){ background:yellow;}//对第二个子元素设定背景色li:nth-last-child(2){ background:blue;}//对倒数第二个子元素设定背景色</style> 3.对所有第偶数个子元素或者第奇数个子元素使用样式<style type="...
绘出圆角:1、下载一个压缩包,里面有一个微软的脚本文件(11KB)和一个用来测试服务器是否有正确的Content-Type的HTML文件:iecss3.rar;.htc 文件是IE内核支持Web行为后用来描述此类行为的脚本文件。它们定义了一套方法和属性,程序员几乎可以把这些方法和属性应用到HTML页面上的任何元素 上去。Web 行为是非常伟大的因为它们允许程序员把自定义的功能“连接”到现有的元素和控件,而不是必须让用户下载二进制文件(例如ActiveX ...
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单,并且可以结合渐变实现更为漂亮的效果。因此使用图片实现五角星已经毫无必要(图片占用额外的请求,且数据量大。除非要支持低版本的桌面IE浏览器)。首先我们创建一个三角形,这通常是使用带大尺寸边线而零内容尺寸的元素来实现,代码示范:.tri {width: 0;height: 0;border-left: 15px solid tran...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figure,figcaption{margin:0;padding:0} body{font:14px"微软雅黑","Arial Narrow",HELVETICA;} figure{ float: left; width: 33%; overflow: hidden; position:...
怎么把body设置成跟浏览器一样的宽高,因为body默认是没有高度的,如果你不设置body的宽高,有时你在注册body事件时,是不能注册的。在css3中Background后面可以跟很多属性:Background-size:它是调整图片的大小的,它可以直接设置宽高,也可以设置两个特殊的值。Cover和contain,他们两个意思是不一样的:Background-origin:它是指图片开始的位置,它一般有三个值:分别是从边框,边框内部,内容区域开始。Content-box这个是用在...
要求必备知识基本了解CSS语法,初步了解CSS3语法知识。和JS/JQuery基本语法。开发环境Adobe Dreamweaver CS6演示地址演示地址预览截图(抬抬你的鼠标就可以看到演示地址哦):制作步骤:一, html结构<div id="home"><form id="login" class="current1" method="post"><h3>用户登入</h3><img class="avator" src="images/avatar.png" width="96" height="96"/><label>邮箱/名称<input type="text" name="name" style="width:215px;"/><s...
transition(过渡动画)transition:过渡的属性名字(transition-property) 过渡的时长(transition-duration) 过渡的曲线(transition-timing-function) 延时(transtion-delay)transformtransition-timing-function:linear(匀速的)ease(慢快慢)ease-in(慢速开始)ease-out(慢速结束)ease-in-out(慢速开始慢速结束)1、位移translate(x,y):x:x轴的坐标点 y:y轴的坐标点的位置translate3d(x,y,z)x:x轴的坐标点 y:y轴的...
CSS概述 css:层叠样式表(Cascading Style Sheets),由于多个选择器的样式可以叠加在一起,所有叫层叠样式表,主要是用来美化界面。 css可放在页面head的<style></style>内、行内、外部css文件中 1<!DOCTYPE html> 2<html> 3 4<head> 5<meta charset="UTF-8"> 6<title>Document</title> 7<!-- 外链样式 --> 8<link rel="stylesheet" href="a.css"/> 9<!-- 页面css -->10<style>11 div{12 color...
转自:http://www.pengyaou.com/codecss3/POKDNMS_112.htmlCSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条。下面是5个滚动条样式。css代码 1.test1::-webkit-scrollbar {2 width: 8px;3 }4 .test1::-webkit-scrollbar-track {5 background-color:#808080;6 -webkit-border-radius: 2em;7 -moz-border-radius: 2em;8 border-ra...
今天分享一个如何使用纯CSS3创建手风琴风格菜单教程,菜单主要通过使用:target伪类来实现。 :target使用介绍 CSS3 target伪类是众多实用的CSS3特性中的一个。它用来匹配文档(页面)的URI中某个标志符的目标元素。具体来说,URI中的标志符通常会包含一 个”#”字符,然后后面带有一个标志符名称,比如#respond,target就是用来匹配ID为respond的元素的。 现在在页面中,点击一个ID链接后,页面只会跳转到相应的位置,但是并不会有比较...
我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个事件、一个动画完成后执行另外一个动画等等,但在使用CSS3动画时能不能捕获到运动的状态做回调处理呢?CSS3动画也是可以做回调处理的,这里分为两个属性,一个是transition[w3c文档],另外一个是animation[w3c文档]。1、transition对于transition,可以监听transitionend事件,当动画完成时触发,可以这样使用:复制代码代码如下:<!DOCTYPE html>...