css3.0相比css2.0多了些我们经常需要使用的标签属性,例如:圆角,个别圆角,不透明度,阴影特效等

1、圆角(即如何画圆)border-radius

a{width:20px;

height:20px;

background:red;

border-radius:20px;}

:其实就是定义一个矩形,将圆的 半径和矩形的宽定义为同一个值,即得出圆。

2、个别圆角(对矩形倒圆角)border-radius

个别圆角:指对矩形的四个角定义圆角,可一次性定义四个角

a{width:20px;

height:20px;

background:red;

border-radius:5px;}

或者定义单个方向上的圆角:

a{width:20px;

height:20px;

background:red;

border-top-left-radius:5px;  (定义矩形左上角圆角)

border-top-right-radius:5px; (定义矩形右上角圆角)

border-bottom-left-radius:5px; (定义矩形左下角圆角)

border-bottom-right-radius:5px; (定义矩形右上角圆角)

}

注意::定义个别圆角时候,顺序是先上下,在左右。

3、不透明度  opacity

一个简单的语句就能实现

a {background:red;

opacity:0.3;}

注:opacity 取值为0-1。  0表示完全透明,1表示完全不透明。

4、阴影特效 shadow

a {background:red;

border:1px solid blue;

shadow:3px 5px 4px red;}

shadow 后面的3个取值表示的意思:

3px  表示:阴影特效在X轴上的距离;

5px 表示:阴影特效在Y轴上的距离;

4px 表示:阴影特效的大小,该值取值越大,阴影范围越大,但是颜色越浅。

css3.0的更多相关文章

  1. win7中VS2010中安装CSS3.0问题解决方法

    win7中VS2010中安装CSS3.0问题解决方法   在安装Standards Update for VS2010 SP1后,VS2010中没有CSS3.0问题,以下是我的解决方法 1.首先去官网 ...

  2. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  3. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  4. 海盗船长小米首页小船来回摆动CSS3.0效果

    海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...

  5. 用CSS3.0画圆

    CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或 ...

  6. CSS3.0盒模型display:-webkit-box;的使用

    box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典   的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没 ...

  7. web前端--知识点,笔记叠加(javascript,jquery,html5+css3.0,ajax)

    函数传参列表,获取方法arguments的使用 function arg(){ var str = '总共传了'+arguments.length+'个参数\n'; for(var i=0;i< ...

  8. CSS3.0动画之hover---Y轴----3D旋转

    div#div2{display: table; width: 100%; height: 100%; text-decoration: none; outline: none; -webkit-tr ...

  9. 让 VS2010 支持 HTML5 和 CSS3.0

    现在的热门话题之一是HTML5 和 CSS3.好的, 它们都很时髦,它们也必然会影响网络开发的未来. 让我们尝尝鲜,花点时间安装设置一下,尽快让Visual Studio2010支持HTML5 和 C ...

随机推荐

  1. ajax联动

    1.编写html代码,引入ajax文件 <script type="text/javascript" src="js/ajax.js"></s ...

  2. 1.2. chromium源代码分析 - chromiumframe - 入口函数

    ChromiumFrame的入口函数在main.cpp中,打开main.cpp.中包含3个类和_tWinMain函数._tWinMain就是我们要找的入口函数.我做了部分注释: int APIENTR ...

  3. cocos2d-x 截取屏幕可见区域

    在游戏中,我们经常需要分享到社交网络的功能.分享时,我们时常会需要用到截屏的功能.目前网上的文章虽然很多,但是都是截取的 设计分辨率(DesignResolutionSize)大小的屏幕,而这个并不是 ...

  4. oracle整体知识的大致介绍(1)-概念

    表空间: oracle允许不同类型的数据分开存放,表空间是数据库的逻辑划分. 数据文件: 表空间由同一磁盘上的一个或多个文件组成,这些文件叫做数据文件. 实例: 是存放和控制数据库的软件机制. ora ...

  5. 网上下载的“上下3D”和“左右3D”影片该如何播放?

    我们平常买的红蓝3D眼镜智能播放红蓝3D片源.网上找3D电影的时候,虽试图去找红蓝3D格式电影,但总会找到不少“左右格式”或者"上下格式"影片.正常播放后发现有两重画面.这种3D电 ...

  6. Android Studio ADB响应失败解决方法

    当启动Android Studio时,如果弹出 adb not responding. you can wait more,or kill "adb.exe" process ma ...

  7. cout输出各种进制

    cout使用: int main(){ int a=10;  cout<<"Dec:"<<a<<endl;  cout<<hex&l ...

  8. [Windows编程] #pragma once 和#ifndef ... #define ... #endif 比较

    C++中防止头文件被多次include 的常见方式有: 1) 用#ifndef ...  #define ... #endif  宏 #ifndef __MYHEADER_H__#define __M ...

  9. ACM—循环小数转变成分数知识点_C++实现

    在小学的时候,我们的学生都能把“整数表示成分母是1的分数”,而且大多数学生也都能把有限小数和循环小数表示成分数的形式.这样,整数.分数.有限小数.循环小数都属于有理数.教科书中说“整数和分数统称有理数 ...

  10. Convert Sorted List to Binary Search Tree ------C++ 递归创建平衡二叉查找树

    有序链表 0->1->2->3->4->5 转换为一个二叉排序树.我们在此创建一个平衡二叉排序树 1.先找链表到中间的节点 2.中间节点的val创建一个新的树节点Tree ...