整理几款css3的简单实例
2015-12-15 14:36
561 查看
1.斜切)
HTML:
显示效果:
2.css3圆角)
源代码:
显示效果:
3.CSS3盒阴影)
源代码:
显示效果:
4.css3渐变)
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
源代码:
显示效果:
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。
源代码:
显示效果:
5.css3过渡)
实例:
把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:
HTML:
<div>你好。这是一个 DIV 元素。</div> <div id="div2">你好。这是一个 DIV 元素。</div>css:
<style> div { width:100px; height:75px; background-color:red; border:1px solid black; } div#div2 { transform:rotate(30deg); -ms-transform:rotate(30deg); /* IE 9 */ -webkit-transform:rotate(30deg); /* Safari and Chrome */ } </style>
显示效果:
2.css3圆角)
源代码:
<!DOCTYPE html> <html> <head> <style> div { border:2px solid #a1a1a1; padding:10px 40px; background:#dddddd; width:300px; border-radius:25px; } </style> </head> <body> <div>border-radius 属性允许您为元素添加圆角边框! </div> </body> </html>
显示效果:
3.CSS3盒阴影)
源代码:
<!DOCTYPE html> <html> <head> <style> div { width:300px; height:100px; background-color:yellow; box-shadow: 10px 10px 5px #888888; } </style> </head> <body> <div></div> </body> </html>
显示效果:
4.css3渐变)
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义
源代码:
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 200px; background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <h3>线性渐变 - 从上到下</h3> <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p> <div id="grad1"></div> <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
显示效果:
使用透明度(Transparency)
为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。源代码:
<!DOCTYPE html> <html> <head> <style> #grad1 { height: 200px; background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <h3>线性渐变 - 透明度</h3> <p>为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。</p> <div id="grad1"></div> <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>
显示效果:
5.css3过渡)
实例:
把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px:
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上,就可以看到过渡效果。</p> <p><b>注释:</b>本例在 Internet Explorer 中无效。</p> </body> </html>
相关文章推荐
- 彻底去掉css前缀的方法
- CSS优化
- 在CSS中 .td{} #td{} td{} 区别
- ListView子布局样式有多个的处理
- Angular2组件开发—为模板应用样式(三)
- CSS 之rem
- Angular2组件开发—为模板应用样式(二)
- 【css】制作网页图标
- Font Awesome
- 使用CSS画三角形
- css 中的度量单位
- CSS里的各种水平垂直居中
- CSS居中
- html+css
- CSS浮动属性float史上最详细分析
- css reset归纳
- 【转载】css sprite css雪碧图生成工具
- css中图片路径,以及在不同浏览器的兼容问题
- Angular2组件开发—为模板应用样式(一)
- 纯css写的一个简单导航条