Css3_必备10个东西
1.边框圆角(Border Radiuas)
这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中,直接只需要如下面饿代码,就能做出美轮美奂的圆角效果了~~~
- #box1 {
- border: 1px solid #699;
- /* for Mozilla Firefox */
- -moz-border-radius: 20px;
- /* for Safari & Google Chrome */
- -webkit-border-radius: 20px;
- }
2.盒阴影(Box Shadow)
- #box1
- {
- border: 1px solid #699;
- -moz-box-shadow: 5px -5px 5px #b6ebf7;
- -webkit-box-shadow: 5px -5px 5px #b6ebf7;
- width: 100px;
- height: 100px;
- margin-left: 100px;
- margin-top: 100px;
- background-color:Gray;
- border-color:Yellow;
- }
需要注意的是,它有4个参数:
第一个参数:水平偏移的位置,它有正数或者负数。如果是正数的话,那么表示边框的右(right)边产生阴影;否则如果是负数的话,那么它的左边(left)框产生阴影效果。
第二个参数:垂直偏移的位置。它也有正数或者负数。如果是正数的话,那么表示下(bottom)边框有阴影;否则如果是负数的话,那么它的上(top)边框有阴影。
第三个参数:阴影的大小
第四个参数:颜色,这个很好理解。
注意上面,第二个参数,我用的是负数。
有box shadow ,还有一个属性是text-shadow,这个主要是运用在文字上面的。
代码如下:
- <div style="background-color: #535353; color: #353535; font-family: 微软雅黑; font-size: 64px; padding:20px; font-weight:bold;">
- <span style="text-shadow: -2px -2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br>
- <span style="text-shadow: 2px 2px 2px #0D0D0D, 0px 0px 5px #aaa;">Welcome to my home!</span><br>
- <span style="text-shadow: 2px 2px 2px #000, 0px 0px 10px #fff, 0px 0px 20px #fff;">Welcome to my home!</span><br>
- <span style="color: white; text-shadow: 0px 0px 10px #fff, 0px 0px 20px #fff, 0px 0px 40px #9dd;">Welcome to my home!</span>
- </div>
3.透明度(Transparency or RGBA)
设定元素的透明度一直以来都是比较棘手的问题,不同的浏览器之间有不同的使用方法。
比如我以前需要如下进行设置透明度:【注意:此方法不建议用】
Firefox, Safari, Chrome和Opera下的CSS透明度
- #myElement {
- opacity: .7;
- }
IE下的CSS透明度
- #myElement {
- filter: alpha(opacity=40);
- }
IE8的CSS透明度的方法语法如
- #myElement {
- filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
- /* 第一行在IE6, IE7和IE8下有效 */
- -ms-filter:
- "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
- /*第二行仅在IE8下有效 */
- }
Firefox和Safari旧版本所需的透明度设置:
- #myElement {
- -khtml-opacity: .5;
- -moz-opacity: 0.5;
- }
是不是特别特别的坑爹啊!~~。
还好,我们现在生活在一个开始完美的时代,CSS 3出来之后,有了新的一个名词就是透明度(transparency)的属性。
代码如下:
- #box3 {
- background-color: rgba(110, 142, 185, .5);
- }
里面有4个参数,前3个参数特别好理解,就是rgb颜色的(别告诉我,还不知道什么叫rgb颜色值,不知道的拉出去打屁屁),最最重要的就是第四个值了。它的值在0到1之间,值越大表明越不透明。
不过,也别高兴的太早,在这里还是有一个特别的例子,可能大家也想到 就是微软的IE。微软老喜欢整个和别人不一样的东西,累死的是我们程序员。
IE理解上面的语句,直接的理解为背景颜色,而不会理解为 rgba。为了我们在开发的时候确保在所有的浏览器中实现完美兼容,我们需要如下进行修正:

- #box3 {
- /* For all browsers */
- background-color: #6e8eb9;
- }
- body:last-child #box3 {
- /* Exclude all IE browsers using :last-child */
- background-color: rgba(110, 142, 185, .5)!important;
- }

:last-child 是伪选择器,在CSS2开始在css中使用选择器。IE 对这个是不认识,所以它不会执行它后面的代码。
所以,上面就实现了完美兼容。
实例效果图:
4.列数(Columns)布局
就是说可以把框框内部的内容分成几个列数。
先上代码:

- #box1
- {
- border: 1px solid #699;
- /* for Mozilla Firefox */
- -moz-column-count: 2;
- -moz-column-gap: 20px;
- -moz-column-rule: 1px solid #6e8eb9;
- /* for Safari & Google Chrome */
- -webkit-column-count: 2;
- -webkit-column-gap: 20px;
- -webkit-column-rule: 1px solid #6e8eb9;
- margin-left: 100px;
- margin-top: 100px;
- border-color: Yellow;
- background-color:Gray;
- }

-moz-column-count:表示列的数目,比如2,那么表示2分成2列。
-moz-column-rule:表示中间分割线的样式。
实例效果图:
上面第一个我分层2列,而第二个我是分成3列的。
还有就是第一个的 -webkit-column-rule: 3px solid #6e8eb9;我这样设置,所以它的分割线就是加粗的。
5.显示多个背景图片
你可以在一个标签元素里应用多个背景图片。代码类似与css2.0版本的写法,但引用图片之间需用“,”逗号隔开。第一个图片是定位在元素最上面的背景,后面的背景图片依次在它下面显示,如下:
- background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
代码如下:

- border: 1px solid #699;
- background: url(/Nature/bird1-thumb.png) no-repeat 0 0, url(/Nature/apple.jpg) no-repeat 100% 0;
- border: 1px solid #699;
- padding: 0 20px;
- margin-left: 100px;
- margin-top: 100px;
- border-color: Yellow;
- background-color: Gray;
- width:400px;
- height:300px;

实例效果图:
但是,这里还是别高兴的太早,又是微软那孩子没事干,又在这里搞一个不兼容性,所以你 不得下下面代码,为了兼容所以浏览器:

- #box5 blockquote {
- /* 用在所有的浏览器*/
- background: url(/i/quotel.gif) 0 0 no-repeat;
- padding: 0 20px;
- }
- body:last-child #box5 blockquote{
- /* 用在除了IE 之外的浏览器:last-child */
- background: url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
- }

这样子才OK.
6.轮廓(outlines)
也就是在框在的内部在画一个框。
代码如下:

- #box1
- {
- border: 1px solid #000;
- outline: 1px solid #699;
- outline-offset: -20px;
- border: 1px solid #699;
- padding: 0 20px;
- margin-left: 100px;
- margin-top: 100px;
- border-color: Yellow;
- background-color: Gray;
- width: 400px;
- height: 300px;
- }

参数很好理解: outline: 1px solid #699; 这个画框;
outline-offset 这个表示里面的偏移量,通俗点说 就是距离。
实例效果图:
7.背景渐变(Background Gradients)
顾名思义,渐变就是颜色慢慢的开始变淡。在CSS3中,渐变效果非常非常的灵活,而且运用也很方便。
不过,这里需要注意的一点是在Firfox和chrome浏览器之间的设定没有和上面的那么简单。
Firfox 的代码:
- background: -moz-linear-gradient(bottom,#b6ebf7, #fff 50%);
Chrome or safari的代码:
- background: -webkit-gradient(linear, left bottom, left top,color-stop(0, #b6ebf7), color-stop(0.80, #fff));
参数解释下,比如在firfox中,
第一个参数:bottom 表示运用的位置,bottom表示在顶部,当然你也可以有其他地方,比如left表示在方框的左边,right在方便的右边,top就是在顶部啦!~。
而在chrome中,color-stop:用来表示开始和结束的值以及里面的颜色。其余参数和上面一样。
实例效果图:
8.旋转(Rotate)
旋转,顾名思义就是转动元素的角度,很好理解。
代码:

- #box1
- {
- border: 1px solid #000;
- -moz-transform: rotate(20deg);
- -webkit-transform: rotate(20deg);
- border: 1px solid #699;
- padding: 0 20px;
- margin-left: 100px;
- margin-top: 100px;
- border-color: Yellow;
- background-color: Gray;
- width: 400px;
- height: 300px;
- }

rotate(角度)里面的数组就是角度的意思,deg是英文单词degree的缩写 度数的意思。
实例效果图:
注意:
如果是负数的话,那么它会向相反方向转动。
如果是超过360度的话,那么会和360进行求余运算,比如你写 rotate(380deg),那么它的值等效于rotate(20deg)。
9.反射(reflect)
反射,其实也就是倒影效果。
代码如下:

- #myFont
- {
- -webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent),
- to(rgba(255, 255, 255, 0.51)));
- font-size: 30px;
- }

实例效果图:
10.转换(Transitions)
注:次内容来自zhangxinxu的博客 。谢谢他的努力。
其作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。于是乎,只要一个整站通用的class,就可以很轻松的渐进增强地实现动画效果,超有实用价值的说。
transition有下面些具体属性:
transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:*//指定这个过渡的持续时间
transition-delay:*
//延迟过渡时间
transition-timing-function:*//指定过渡类型,有ease | linear | ease-in |
ease-out | ease-in-out | cubic-bezier
上面的主要用在transition-timing-function里面的参数。表示速度的快慢。
代码:
HTML

- <div id="transBox" class="trans_box">
- <div class="trans_list ease">
- ease</div>
- <div class="trans_list ease_in">
- ease-in</div>
- <div class="trans_list ease_out">
- ease-out</div>
- <div class="trans_list ease_in_out">
- ease-in-out</div>
- <div class="trans_list linear">
- linear</div>
- </div>

CSS代码:

- <style type="text/css">
- .trans_box
- {
- padding: 20px;
- background-color: #f0f3f9;
- }
- .trans_list
- {
- width: 10%;
- height: 64px;
- margin: 10px 0;
- background-color: #486AAA;
- color: #fff;
- text-align: center;
- }
- .ease
- {
- -webkit-transition: all 4s ease;
- -moz-transition: all 4s ease;
- -o-transition: all 4s ease;
- transition: all 4s ease;
- }
- .ease_in
- {
- -webkit-transition: all 4s ease-in;
- -moz-transition: all 4s ease-in;
- -o-transition: all 4s ease-in;
- transition: all 4s ease-in;
- }
- .ease_out
- {
- -webkit-transition: all 4s ease-out;
- -moz-transition: all 4s ease-out;
- -o-transition: all 4s ease-out;
- transition: all 4s ease-out;
- }
- .ease_in_out
- {
- -webkit-transition: all 4s ease-in-out;
- -moz-transition: all 4s ease-in-out;
- -o-transition: all 4s ease-in-out;
- transition: all 4s ease-in-out;
- }
- .linear
- {
- -webkit-transition: all 4s linear;
- -moz-transition: all 4s linear;
- -o-transition: all 4s linear;
- transition: all 4s linear;
- }
- .trans_box:hover .trans_list, .trans_box_hover .trans_list
- {
- margin-left: 89%;
- background-color: #beceeb;
- color: #333;
- -webkit-border-radius: 25px;
- -moz-border-radius: 25px;
- -o-border-radius: 25px;
- border-radius: 25px;
- -webkit-transform: rotate(360deg);
- -moz-transform: rotate(360deg);
- -o-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- </style>

此主要实现的效果是从左边移动到右边!~~。根据参数的不同,进行速度的不同。
实例效果图:初始化时:
实例效果图后:
可能有些朋友对这个5个功能不熟悉,所以它们的速度如图:
最后奉献2张有用的图:
CSS 性质
CSS 选择器
Css3_必备10个东西的更多相关文章
- 优秀Java程序员必备10招
1. 拥有扎实的基础和深刻理解 OO 原则 对于 Java 程序员,深刻理解 ObjectOriented Programming(面向对象编程)这一概念是必须的.没有 OOPS 的坚实基础,就领会不 ...
- Linux就这个范儿 第16章 谁都可以从头再来--从头开始编译一套Linux系统 nsswitch.conf配置文件
Linux就这个范儿 第16章 谁都可以从头再来--从头开始编译一套Linux系统 nsswitch.conf配置文件 朋友们,今天我对你们说,在此时此刻,我们虽然遭受种种困难和挫折,我仍然有一个梦 ...
- 干了这碗鸡汤:从理发店小弟到阿里P10技术大牛
1.引言 MIT TR 35(MIT Technology Review 35 Innovators Under 35)——“全球 35 位 35 岁以下科技创新青年”榜单,是全球最权威的青年科技创新 ...
- [源码]String StringBuffer StringBudlider(1String部分)
String /** The value is used for character storage. */ private final char value[]; /** Th ...
- HashCode equals
HashCode: hashcode就是一个签名.当两个对象的hashcode一样时,两个对象就有可能一样.如果不一样的话两个对象就肯定不一样.一般用hashcode来进行比较两个东西是不是一样的,可 ...
- 慕课网,我的yii2学习笔记(基础篇)
一.关于PHP知识点 1.命名空间:存放类文件的空间,可以随便定义,建议与类文件目录一致,方便管理. 注:(1).如果类没有设置命名空间,默认为顶级命名空间,在程序中可以用一下方式实例化. $mode ...
- JS继承的一些见解
JS继承的一些见解 js在es6之前的继承是五花八门的.而且要在项目中灵活运用面向对象写法也是有点别扭,更多的时候还是觉得面向过程的写法更为简单,效率也高.久而久之对js的继承每隔一段时间就会理解出现 ...
- 一个前端开发者换电脑的过程(IDE篇)
一台全新的电脑,需要做出怎样的改变,才可以摇身一变成为前端开发者能用的电脑呢.首先,我们需要安装一个编辑器,这里我们选择目前最火的vscode. 先去到它的官网,把对应版本的vscode下载下来. 然 ...
- VSCode之快捷键和常用插件
前言 介绍一下我在VSCode中常用的一些快捷方式: ctrl+上下箭头 上下滚动页面 Ctrl+Shift+K 删除某一行 Alt+ ↑ / ↓ 移动某一行 Shift+Alt + ↓ / ↑ 复制 ...
随机推荐
- Jenkins构建Git manager服务器的源码
1,下载scm manager 源码库管理,下载后解压即可: 2,运行bin目录下的scm-server.bat文件,启动服务: 3,建议将scm-server放在git客户端的安装目录下,方便管理 ...
- Shell脚本编程初体验
原文:http://linoxide.com/linux-shell-script/guide-start-learning-shell-scripting-scratch/ 作者: Petras L ...
- CodeForces 219C Color Stripe
Color Stripe Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submi ...
- Windows下通过bat脚本实现自动上传文件到ftp服务器
@Echo Off Echo open ip_address [port] >ftp.up Echo [username]>>ftp.up Echo [password]>&g ...
- Django1.9 Python3.4出现Error loading MySQLdb
linux Errorloading MySQLdb module: No module named MySQLdb 这是因为目前 MySQLdb 还不支持 python3.x ,开源无人维护哈 之前 ...
- [SAP ABAP开发技术总结]逻辑数据库
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- python_way ,day11 线程,怎么写一个多线程?,队列,生产者消费者模型,线程锁,缓存(memcache,redis)
python11 1.多线程原理 2.怎么写一个多线程? 3.队列 4.生产者消费者模型 5.线程锁 6.缓存 memcache redis 多线程原理 def f1(arg) print(arg) ...
- iOS 框架收集
检测硬件设备信息 https://github.com/Shmoopi/iOS-System-Services
- HDU 1003 Max Sum 解题报告
题目大意:求一串数字中,几个连续数字加起来最大值,并确定起始和最末的位置. 思路:这是一题DP题,但是可以用尺取法来做.我一开始不会,也是看了某大神的代码,然后有人告诉我这是尺取法,现在会了. //尺 ...
- JS trim()方法使用
JS trim()方法使用上有浏览器限制: 1.直接使用 string.trim() 浏览器版本限制:JavaScript Version 1.8 2.间接使用<即自己使用正则构造类trim的 ...