css颜色和透明度,盒子阴影和轮廓,光标样式

学习要点:
1.颜色和透明度
2.盒子阴影和轮廓
3.光标样式

一.颜色和透明度
颜色我们之前其实已经用的很多了,比如字体颜色、背景颜色、边框颜色。但除了背景颜色和边框颜色讲解过,字体颜色却没有系统的讲解过。设置字体颜色其实也成为文本块的前景色。

color设置文本颜色

          属性               值                 说明                              CSS版本

            color             颜色值          设置文本前景色                    1

div > span{
color: #1e1eff;
} <div><span>这是一段文本</span></div>

opacity设置元素的透明度

         属性               值                  说明                               CSS版本

           opacity          0 ~ 1            设置元素的透明度                    3

div > span{
background-color: #ff2b1c;
opacity: 0.5;
} <div><span>这是一段文本</span></div>

二.盒子阴影和轮廓 

box-shadow阴影效果

CSS3提供了一个非常实用的效果样式,就是阴影效果。通过box-shadow属性来实现样式表如下:CSS版本3

         属性              值                    说明                                                                                       

   box-shadow       hoffset                阴影的水平偏移量,是一个长度值,                                              

                                                        正值表示阴影向右偏移,负值表示阴影向左偏移。  

                         

                                voffset                     阴影的垂直偏移量,是一个长度值,正值代表阴影位于元素盒子的下方, 

                                                            负值代表阴影位于元素盒子 上方。

                             blur                       (可选)指定模糊值,是一个长度值,值越大盒子的边界越模糊。                           

                                                               默认值为0,边界清晰    

                                 spread                   (可选)指定阴影延伸半径,是一个长度值,                                                    

                                                               正值代表阴影向盒子各个方向延伸扩大,负值代表阴影沿相反方向缩小    

                                 color                      (可选)设置阴影的颜色,如果省略,浏览器会自行选择一个颜色                          

                                 inset                      (可选)将外部阴影设置为内部阴影                                                   

div{
width: 200px;
height: 200px;
border: 10px solid #1dc01e;
box-shadow: 5px 4px 10px 8px gray;
} <div>这是一段文本</div>

实现内部阴影

box-shadow: 5px4px 10px 2px gray inset;

outline在边框的外围再增加一圈轮廓

CSS3还提供了轮廓样式,它和边框一样,只不过它可以在边框的外围再加一层。样式表如下: 

            属性                值                            说明                         CSS版本

       outline-color         颜色                外围轮廓的颜色                              3

      outline-offset        长度                轮廓距离元素边框边缘的偏移量          3

       outline-style           样式                轮廓样式,和border-style一致         3

       ontline-witdh       长度                轮廓宽度                                        3

          outline            简写                       <颜色> <样式> <宽度>                   3

div{
width: 200px;
height: 200px;
border: 10px solid #1dc01e;
outline: #c04725 solid 3px;
} <div>这是一段文本</div>

三.光标样式
我们不但可以指定页面上的元素样式,就连光标的样式也可以指定。样式表如下:

cursor设置当前元素的光标

      属性                  值                               说明                     CSS版本

    cursor                  auto,default,none,context-men               光标样式                     1

                                u,help,pointer,progress,wait,

                                cell,crosshair,text,vertical-

                                text,alias,copy,move,no-drop,

                                not-allowed,e-resize,n-resize                                   

                                ,ne-resize,nw-resize,s-resize

                                ,se-resize,sw-resize,w-resize

                                ,ew-resize,ns-resize,nesw-res

                                ize,nwse-resize,col-resize,ro

                                w-resize,all-scroll

div{
width: 200px;
height: 200px;
border: 10px solid #1dc01e;
cursor: pointer;
} <div>这是一段文本</div>

                             

                                 

第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式的更多相关文章

  1. 第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表

    第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表.课程评论表.用户收藏表.用户消息表.用户学习表 创建名称为ap ...

  2. 第一百七十六节,jQuery,插件

    jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...

  3. 第二百七十六节,MySQL数据库,【显示、创建、选定、删除数据库】,【用户管理、对用户增删改查以及授权】

    MySQL数据库,[显示.创建.选定.删除数据库],[用户管理.对用户增删改查以及授权] 1.显示数据库 SHOW DATABASES;显示数据库 SHOW DATABASES; mysql - 用户 ...

  4. ASP.NET MVC深入浅出系列(持续更新) ORM系列之Entity FrameWork详解(持续更新) 第十六节:语法总结(3)(C#6.0和C#7.0新语法) 第三节:深度剖析各类数据结构(Array、List、Queue、Stack)及线程安全问题和yeild关键字 各种通讯连接方式 设计模式篇 第十二节: 总结Quartz.Net几种部署模式(IIS、Exe、服务部署【借

    ASP.NET MVC深入浅出系列(持续更新)   一. ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模 ...

  5. 第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承

    第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...

  6. 第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装

    第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...

  7. 第一百二十六节,JavaScript,XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  8. 第十六节、基于ORB的特征检测和特征匹配

    之前我们已经介绍了SIFT算法,以及SURF算法,但是由于计算速度较慢的原因.人们提出了使用ORB来替代SIFT和SURF.与前两者相比,ORB有更快的速度.ORB在2011年才首次发布.在前面小节中 ...

  9. 第四百一十六节,Tensorflow简介与安装

    第四百一十六节,Tensorflow简介与安装 TensorFlow是什么 Tensorflow是一个Google开发的第二代机器学习系统,克服了第一代系统DistBelief仅能开发神经网络算法.难 ...

随机推荐

  1. idea svn 更新覆盖了本地代码

    idea  更新svn代码,覆盖了本地代码,还不能ctr+z怎么办? 下图

  2. samba 开启

    1.查询samba服务安装好没 2.安装samba服务 3.增加以下几个条目 4.useradd smbuser 5.在重启中注意的问题 5.详细请查看 http://jingyan.baidu.co ...

  3. centos 编译安装nginx

    这里选用的是nginx-1.10.1稳定版,其基础依赖库有gcc.gcc-c++.pcre.zlib和openssl. pcre.zlib和openssl这三个依赖库在安装nginx时无需编译安装,下 ...

  4. 相对协议-关于src里//开头的知识

    "相对协议",也就是链接以 // 开头,前面去掉了 http: 或 https: 字样, 这样做的好处是浏览器能够根据你的网站所采用的协议来自动加载 CDN 上托管的文件!

  5. GIT 代码管理工具 SourceTree

    什么是git? git是一款开源的分布式版本控制工具 在世界上所有的分布式版本控制工具中,git是最快.最简单.最流行的 git的起源 作者是Linux之父:Linus Benedict Torval ...

  6. Homestead PHP7安装phpredis扩展

    sudo mkdir /home/phpredis/ && cd /home/phpredis/ sudo git clone -b php7 https://github.com/p ...

  7. python项目练习地址

    作者:Wayne Shi链接:http://www.zhihu.com/question/29372574/answer/88744491来源:知乎著作权归作者所有,转载请联系作者获得授权. 目前是3 ...

  8. GL应用方面

    1.图和表 2.计算机辅助设计CAD 3.虚拟现实环境 4.数据可视化 5.教学与培训(基于VR) 6.计算机艺术 7.娱乐 8.图像处理 9.用户界面

  9. eclipse 安卓运行一直跳转到调试模式

    最直接的办法,换手机试试,如果在其他手机上能run,那就重启手机即可 感觉写这么一点点似乎不足以发表一篇博客,给个链接吧:http://www.itnose.net/detail/6103213.ht ...

  10. linux配置更改yum源

    1,进入yum源配置目录 cd /etc/yum.repos.d 2,备份系统自带的yum源mv CentOS-Base.repo CentOS-Base.repo.bk下载163网易的yum源:wg ...