第七十六节,css颜色和透明度,盒子阴影和轮廓,光标样式
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颜色和透明度,盒子阴影和轮廓,光标样式的更多相关文章
- 第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表、课程评论表、用户收藏表、用户消息表、用户学习表
第三百七十六节,Django+Xadmin打造上线标准的在线教育平台—创建用户操作app,在models.py文件生成5张表,用户咨询表.课程评论表.用户收藏表.用户消息表.用户学习表 创建名称为ap ...
- 第一百七十六节,jQuery,插件
jQuery,插件 学习要点: 1.插件概述 2.验证插件 3.自动完成插件 4.自定义插件 插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编 ...
- 第二百七十六节,MySQL数据库,【显示、创建、选定、删除数据库】,【用户管理、对用户增删改查以及授权】
MySQL数据库,[显示.创建.选定.删除数据库],[用户管理.对用户增删改查以及授权] 1.显示数据库 SHOW DATABASES;显示数据库 SHOW DATABASES; mysql - 用户 ...
- 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的无状态模 ...
- 第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承
第三百八十六节,Django+Xadmin打造上线标准的在线教育平台—HTML母版继承 母板-子板-母板继承 母板继承就是访问的页面继承一个母板,将访问页面的内容引入到母板里指定的地方,组合成一个新页 ...
- 第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装
第三百七十九节,Django+Xadmin打造上线标准的在线教育平台—xadmin的安装 xadmin介绍 xadmin是基于Django的admin开发的更完善的后台管理系统,页面基于Bootstr ...
- 第一百二十六节,JavaScript,XPath操作xml节点
第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...
- 第十六节、基于ORB的特征检测和特征匹配
之前我们已经介绍了SIFT算法,以及SURF算法,但是由于计算速度较慢的原因.人们提出了使用ORB来替代SIFT和SURF.与前两者相比,ORB有更快的速度.ORB在2011年才首次发布.在前面小节中 ...
- 第四百一十六节,Tensorflow简介与安装
第四百一十六节,Tensorflow简介与安装 TensorFlow是什么 Tensorflow是一个Google开发的第二代机器学习系统,克服了第一代系统DistBelief仅能开发神经网络算法.难 ...
随机推荐
- idea svn 更新覆盖了本地代码
idea 更新svn代码,覆盖了本地代码,还不能ctr+z怎么办? 下图
- samba 开启
1.查询samba服务安装好没 2.安装samba服务 3.增加以下几个条目 4.useradd smbuser 5.在重启中注意的问题 5.详细请查看 http://jingyan.baidu.co ...
- centos 编译安装nginx
这里选用的是nginx-1.10.1稳定版,其基础依赖库有gcc.gcc-c++.pcre.zlib和openssl. pcre.zlib和openssl这三个依赖库在安装nginx时无需编译安装,下 ...
- 相对协议-关于src里//开头的知识
"相对协议",也就是链接以 // 开头,前面去掉了 http: 或 https: 字样, 这样做的好处是浏览器能够根据你的网站所采用的协议来自动加载 CDN 上托管的文件!
- GIT 代码管理工具 SourceTree
什么是git? git是一款开源的分布式版本控制工具 在世界上所有的分布式版本控制工具中,git是最快.最简单.最流行的 git的起源 作者是Linux之父:Linus Benedict Torval ...
- Homestead PHP7安装phpredis扩展
sudo mkdir /home/phpredis/ && cd /home/phpredis/ sudo git clone -b php7 https://github.com/p ...
- python项目练习地址
作者:Wayne Shi链接:http://www.zhihu.com/question/29372574/answer/88744491来源:知乎著作权归作者所有,转载请联系作者获得授权. 目前是3 ...
- GL应用方面
1.图和表 2.计算机辅助设计CAD 3.虚拟现实环境 4.数据可视化 5.教学与培训(基于VR) 6.计算机艺术 7.娱乐 8.图像处理 9.用户界面
- eclipse 安卓运行一直跳转到调试模式
最直接的办法,换手机试试,如果在其他手机上能run,那就重启手机即可 感觉写这么一点点似乎不足以发表一篇博客,给个链接吧:http://www.itnose.net/detail/6103213.ht ...
- linux配置更改yum源
1,进入yum源配置目录 cd /etc/yum.repos.d 2,备份系统自带的yum源mv CentOS-Base.repo CentOS-Base.repo.bk下载163网易的yum源:wg ...