CSS3 必须要知道的10 个顶级命令
来源:http://www.cnblogs.com/damonlan/archive/2012/04/23/2465569.html
作者:浪迹天涯
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)
就是让一个div能够产生阴影效果。代码如下:
#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)布局
就是说可以把框框内部的内容分成几个列。(嗯,就是word里面的分栏的效果)
先上代码:
#box1
{
border: 1px solid #699;
/* for Mozilla Firefox */
-moz-column-count:;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #6e8eb9; /* for Safari & Google Chrome */
-webkit-column-count:;
-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;
}
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 选择器
算了,就先到这里吧!。希望对你们有用!~。哈哈~~。
CSS 3中有很多非常酷的东西,需要我们共同去挖掘!~。
愿你和你的家人一切安好!~。
作者:Lanny☆兰东才
出处:http://www.cnblogs.com/damonlan
Q Q:*********
E_mail:Damon_lan@163.com or Dongcai.lan@hp.com
本博文欢迎大家浏览和转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,在『参考』的文章中,我会表明参考的文章来源,尊重他人版权。若您发现我侵犯了您的版权,请及时与我联系。
CSS3 必须要知道的10 个顶级命令的更多相关文章
- CSS3必须要知道的10个顶级命令
1.边框圆角(Border Radiuas) 这个是我们在平常很常用的吧,以前我在用div圆角的时候,特别特别的痛苦,不管是用CSS来画圆角,还是用图片来画圆角都不那么容易,但是现在好了,在CSS3中 ...
- 【转载】在IT界取得成功应该知道的10件事
在IT界取得成功应该知道的10件事 2011-08-11 13:31:30 分类: 项目管理 导读:前面大多数文章都是Jack Wallen写的,这是他的新作,看来要成为NB程序员还要不停的自我总结 ...
- 你应该知道的10个奇特的 HTML5 单页网站
网页设计师努力寻找新的方式来展现内容.其中一个大的趋势是单页网站,现在被世界上的一些大的品牌广泛采用,使用它们来为用户提供一个快速,干净和简单的而且美丽的网站. 下面是10个令人惊叹的单页 H ...
- (0)开始 Raspberry Pi 项目前需要知道的 10 件事
https://www.digikey.cn/zh/articles/techzone/2017/feb/10-things-to-know-before-starting-a-raspberry-p ...
- 希望早几年知道的5个Unix命令
原文: http://spin.atomicobject.com/2013/09/09/5-unix-commands/ 希望早几年知道的5个Unix命令 使用*nix系统已经有一段时间了.但是还是有 ...
- 每一个JavaScript开发者都应该知道的10道面试题
JavaScript十分特别.而且差点儿在每一个大型应用中起着至关关键的数据.那么,究竟是什么使JavaScript显得与众不同,意义非凡? 这里有一些问题将帮助你了解其真正的奥妙所在: 1.你能 ...
- (转)程序员应该知道的10个eclipse调试技巧
调试不仅可以查找到应用程序缺陷所在,还可以解决缺陷.对于Java程序员来说,他们不仅要学会如何在Eclipse里面开发像样的程序,更需要学会如何调试程序.本文介绍了Java程序员必知的10个调试技巧, ...
- 你应该知道的16个linux命令
Linux常用命令很多比如cd.ls.pwd.du.df.tail.head.yum.mv.touch.mkdir.cp.tar等,根据工作内容不同,经常使用的命令也不同,比如运维人员使用tail.h ...
- Web设计新手应知道的10个锦囊妙计
摘要:你在网页设计所学到的大多数教训都来自工作经验.学习是一个反复持续的过程,并且没有比犯错更好的方式来获得知识.在本文中,我们将讨论10个重要并常规的技巧,这是每位Web设计师新手都应该知道. 在做 ...
随机推荐
- Design Patterns---- Strategy 模式
设计模式:可复用面向对象软件的基础 书中对 Strategy 模式的定义如下: 定义了一系列的算法,把它们一个个封装起来,并且使它们可相互替换.本模式使得算法可独立于它的用户而变化. 案例:设计一个商 ...
- win7登入使用的是临时档案解决方法
开始——运行(搜索程序与文件)——regedit——HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileLis ...
- 2、网页制作Dreamweaver(图片热点、frameset框架)
图片热点 1.方法: <img usemap="名字"> <map name="名字"> <area shape="r ...
- ios开发环境 分支语句 、 循环结构(for) 、 循环结构
1 完成命令解析程序 1.1 问题 有命令解析程序,该程序提供三个功能选项供用户选择,用户选择某功能后,程序在界面上输出用户所选择的功能名称.程序的交互效果如图-1所示: 图-1 由上图可以看出,程序 ...
- oracle将多条数据合并成一条
select t.col1,t.col2 ,wmsys.wm_concat(t.col3||' ') AS col3 , wmsys.wm_concat(t.col4||'') as col4,w ...
- lhgdialog 与后台交互的对话框
官网:http://www.lhgdialog.com/ 1. 调用打开dialog的按钮 <span class="txtdec fs10 open"> <a ...
- 【题解】【DP】【Leetcode】Climbing Stairs
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- Why did Jimmy Wales invest in Quora? Is he afraid that it will take over Wikipedia?
QUESTION: Why did Jimmy Wales invest in Quora? Is he afraid that it will take over Wikipedia? Answer ...
- MAC OSX使用公钥方式登录Linux服务器并进行安全加固
登录Linux服务器的方式一般是使用ssh,直接使用密码登录既要记忆密码在输入过程中又有安全风险.所以本文将提供一个使用公钥登录的方式来解决输入密码的问题. 首先在mac上生成一个私钥.公钥对 首先, ...
- hdu 5190 Building Blocks
问题描述 看完电影后,乐乐回家玩起了积木. 他已经搭好了n堆积木,他想通过调整积木,使得其中有连续W堆积木具有相同的高度,同时他希望高度恰好为H. 乐乐的积木都这了,也就是说不能添加新的积木,只能移动 ...