一、CSS3的一些特殊属性

1.1 text-shadow

text-shadow曾经在css2中就出现过，但在css2.1版本中又被抛弃了，现在css3.0版本又重新捡回来了。这说明text-shadow这个属性非常值得我们做前端的人员重视。

语法：text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是：
　　text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
　　text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...

取值:

<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值

<color>：指定阴影颜色，也可以是rgba透明色

<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离。

示例：

代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Text_shadow</title>

        <style type="text/css">

            .p_shadow1 {

                text-shadow: 2px 3px 2px red;

            }

            .p_shadow2 {

                text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;

            }

            .p_shadow3 {

                color: #ccc;

                text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333, 1px 1px 0 #444;

            }

            .p_shadow4 {

                color: #fff;

                text-shadow: 1px 1px rgba(197, 223, 248, 0.8), 2px 2px rgba(197, 223, 248, 0.8), 3px 3px rgba(197, 223, 248, 0.8), 4px 4px rgba(197, 223, 248, 0.8), 5px 5px rgba(197, 223, 248, 0.8), 6px 6px rgba(197, 223, 248, 0.8);

            }

            .p_shadow5 {

                color: #eee;

                text-shadow: 5px 5px 0 #666, 7px 7px 0 #eee;

            }

        </style>

    </head>

    <body>

        <p class="p_shadow1">Hello World!</p>

        <p class="p_shadow2">Hello World!</p>

        <p class="p_shadow3">Hello World!</p>

        <p class="p_shadow4">Hello World!</p>

        <p class="p_shadow5">Hello World!</p>

    </body>

</html>

5种效果展示：

1.2 box-shadow

含义：给文本添加阴影效果，box-shadow是给元素块添加周边阴影效果。

随着HTML与CSS3的普及，这一特殊效果使用越来越普遍。

基本语法：

{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}

对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

box-shadow属性的参数设置取值：

阴影类型：此参数可选。如不设值，默认投影方式是外阴影；如取其唯一值“inset”，其投影为内阴影；

X-offset:阴影水平偏移量，其值可以是正负值。如果值为正值，则阴影在对象的右边，其值为负值时，阴影在对象的左边；

Y-offset:阴影垂直偏移量，其值也可以是正负值。如果为正值，阴影在对象的底部，其值为负值时，阴影在对象的顶部；

阴影模糊半径：此参数可选，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

阴影颜色：此参数可选。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，特别是在webkit内核下的safari和chrome浏览器下表现为透明色，在Firefox/Opera下表现为黑色（已验证），建议不要省略此参数。

浏览器的兼容：

下面用一个例子：

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>CSS3属性：box-shadow测试</title>

        <style type="text/css">

            div {

                width: 200px;

                height: 100px;

                background: lightblue;

                margin: 10px;

                display: inline-block;

            }

            .box-shadow1 {

                box-shadow: 5px 5px 5px gray;

            }

            .box-shadow2 {

                box-shadow: -5px -5px 5px goldenrod;

            }

            .box-shadow3 {

                box-shadow: -5px 10px 0 lawngreen;

            }

            .box-shadow4 {

                box-shadow: 0 0 40px rgba(0, 204, 204, .5);

            }

            .box-shadow5 {

                box-shadow: -5px 0 5px red, /*左边*/

                5px 0 5px blue, /*右边*/

                0 5px 5px greenyellow, /*下边*/

                0 -5px 5px yellow;/*上边*/

            }

            /*内阴影*/

            .box-shadow6 {

                box-shadow: inset 10px 0 0 lawngreen;

            }

            .box-shadow7 {

                box-shadow: inset 3px 3px 3px gray;

            }

            .box-shadow8 {

                box-shadow: 10px 10px 0 goldenrod;

            }

            .box-shadow9 {

                box-shadow: 3px 0 0 lawngreen;

            }

        </style>

    </head>

    <body>

        <div class="box-shadow1"></div>

        <div class="box-shadow2"></div>

        <div class="box-shadow3"></div>

        <div class="box-shadow4"></div>

        <div class="box-shadow5"></div>

        <div class="box-shadow6"></div>

        <div class="box-shadow7"></div>

        <div class="box-shadow8"></div>

        <div class="box-shadow9"></div>

    </body>

</html>

结果：

CSS3学习之——【特殊属性】的更多相关文章

  1. CSS3学习之 animation 属性

    发现animation这个新属性很有趣,在此学习,并整理下!  浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...

  2. CSS3学习笔记之属性值

    font-family 设置文本的字体名称. font-style 设置文本样式. 取值 normal不使用斜体. italic使用斜体. oblique使用倾斜体. inherit从父元素继承. f ...

  3. CSS3学习之 transform 属性

    CSS3 transform是什么? transform的含义是:改变,使…变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...

  4. css3学习之--transition属性（过渡）

    一.理解transition属性 W3C标准中对CSS3的transition是这样描述的: CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡.这种效果可以在鼠标单击,获得焦 ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. CSS3学习

    1.CSS3边框 border-radius:创建圆角边框 border-radius:25px; -moz-border-radius:25px; /* 老的 Firefox */ box-shad ...

  7. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  8. css和css3学习

    css和css3学习 css布局理解 css颜色大全 样式的层叠和继承 css ::before和::after伪元素的用法 中文字体font-family常用列表 cursor属性 css选择器 F ...

  9. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

随机推荐

  1. WCF订阅替换轮训

    使用WCF订阅替换轮训 之前因为某些特定岗位的人不知道是不方便还是什么的原因,所以随便做了个独立于所有系统之外的邮件审批服务,功能是那些人在邮件里给待审批单据发个“同意”就自动审批通过,大致分为3部分 ...

  2. 青铜器RDM全面支持CMMI、GJB5000A L2~L5认证评估

    青铜器RDM全面实现对CMMI L4.GJB5000A L4的100%支持,并且已经成为众多组织CMMI.GJB5000A落地执行的有效手段,避免认证与执行2张皮,有利于体系的贯彻执行,以下是青铜器R ...

  3. REST风格的服务

    使用ASP.NET Web Api构建基于REST风格的服务实战系列教程[三]——Web Api入门 系列导航地址http://www.cnblogs.com/fzrain/p/3490137.htm ...

  4. CODEFORCES#274 DIV2

    A[傻逼题] 大意:给你a,b,c三个数,你可以在其中加上括号,加号,乘号,使得到的值最大 就是问你 a+b+c,a*(b+c),(a+b)*c,a*b*c,(a+c)*b 哪个最大! 我去...这不 ...

  5. Day3：T1数论+高精 T2搜索

    T1:数论+高精(水~) 根据题意可知,从除的数越大越好(在0~9中) 所以我们只要用到高精除然后再模拟一下就可以了 //MARK:但是要注意0-9这个特殊值需要特判,因为题目要求输出的数至少是两位数 ...

  6. eclipse在Ubuntu 13.04下的安装过程

    eclipse在Ubuntu 13.04下的安装过程及问题小记 一.eclipse安装过程 首先确保在安装eclipse之前已经安装好Java虚拟机 1. eclipse官网下载压缩包 下载地址:ht ...

  7. IOS7学习之路八（iOS 禁止屏幕旋转的方法）

    - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation { retu ...

  8. MyEclipse修改默认的workspace路径

    在此只提供一个自己认为可行的办法(已验证可行) 已MyEclipse8.5为例 打开安装路径C:\Program Files\Genuitec\MyEclipse 8.5\configuration下 ...

  9. spring实现数据库读写分离

    现在大型的电子商务系统,在数据库层面大都采用读写分离技术,就是一个Master数据库,多个Slave数据库.Master库负责数据更新和实时数据查询,Slave库当然负责非实时数据查询.因为在实际的应 ...

  10. APP类别之比较与分析

    大数据应用:五大地区喜新厌旧游戏APP类别之比较与分析 前阵子笔者开发了一套系统可以用来收集亚洲五大地区上架APP的每日排名信息,希望观察出五大地区在APP上的喜好和使用程度之间的相异性. 所以,在下 ...