css3文字阴影和盒子阴影
首先，圆角的话我们已经在前面提到过，也写过很多次了，这里再给大家发以下代码的写法，做一个温习就过了：
那么效果如下：
border-raidus 所设置的px越大，圆角效果越明显，只有当元素的宽度和高度一致，并且border-raidus所设置的px为宽高的一半时，才会变成正圆形：
效果如下：
接下来我们来介绍一下文字阴影(text-shadow)：
先来看一下效果：
我们会发现，产生了一个颜色比较淡的文字阴影，那么text-shadow的各个元素值是什么作用呢？
text-shadow:10px 10px 5px #ccc;这句代码中，最后一个#ccc是文字颜色，大家应该都砍的出来，10px 10px 第一个是x轴的位置，第二个是y轴的位置，5px 是文字的模糊度，设置的越大，文字越模糊。
同时，文字阴影支持多种阴影叠用，用法就是中间用一个逗号隔开，然后定义一组新的文字阴影，如下图：
效果如下：
那么有文字阴影，就会有盒子阴影，他的写法和文字阴影非常的像，代码如下：
效果如下：
那么这是盒子阴影的一个基础写法，但是盒子特殊的一点是盒子有内阴影，写法如下：
效果如下：
同理，盒子阴影也支持多种阴影叠加，中间用逗号隔开。在这里就不做展示了。
最后呢，我们来讲解一下css3的另外一个新属性，就是透明。透明的写法如下：
效果如下：
我们发现，背景色定义的是黑色，但是呈现出来的是灰色。为了更明显一点，我把这个大div浮动起来，之后在他后面定义一个小div做对比：
效果如下：
那么，这个红色被透明层遮罩了以后，颜色变的比较暗淡。这就是透明层的作用。
opacity:0.5;这句代码的作用就是设置透明度，0.5是透明的力度大小，1是完全透明。
filter:alpha(opacity=50); 加上这一行代码是兼容IE浏览器的写法，因为IE浏览器不支持opacity的写法，所以opacity:0.5在IE浏览器不会生效，但是加上filter:alpha(opacity=50);那么就兼容了所有的浏览器。
接下来我们来介绍一下线性背景，线性背景也是CSS3新增的一个样式，注意，CSS3的所有内容只有IE9以上的浏览器才能支持。
首先我们先来看线性背景的语法：
效果如下：
那么同样的，这是一种的上下结构的背景渐变。有了上下的，就会有左右的。写法如下：
注意，这边加上了-webkit-，是一种兼容chrome的写法，因为之前直接写了left,没有加-webkit-，然后页面上就报错了。显示不了，所以这里要注意一下。这个代码的效果如下：
那么既然有left,就会有right,bottom,top，默认是top。就是我们的上下结构。那么斜着的话要怎么实现呢？这个时候，就要把我们的left,right,bottom,top改成我们的以deg为单位的角度，如下图：
效果如下：
那么，这样使我们的线性背景有了一些角度。注意，这里的deg可以用负数。
线性背景也可以同时支持多种颜色来渲染元素：
效果如下：
那么这边，我们分别用了5种颜色来同时渲染这个元素。以%来区分渲染的区域。
线性背景还有一种写法，是从中心向四周扩散，写法如下：
效果如下：
注意，这里的样式是radial-gradient ，而不是linear-gradient。写法是有区别的，但是值的写法又非常的接近。也支持left ,right,bottom,top,center，默认为center，代表圆心的位置在哪里。
css3文字阴影和盒子阴影相关推荐
- html盒子阴影效果,CSS3给div或者文字添加阴影（盒子阴影、文本阴影的使用）
添加阴影效果以前只能使用图片来实现了,现在的css3功能非常的强大了,今天我们就一起来看关于CSS3给div或者文字添加阴影(盒子阴影.文本阴影的使用)的方法,具体的例子如下所示． CSS3定义了两种 ...
- css如何给盒子底部加阴影,CSS3 --添加阴影（盒子阴影、文本阴影的使用）
CSS3 - 给div或者文字添加阴影(盒子阴影.文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影.其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本.下面分别介绍两种 ...
- Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
前言 持续学习总结输出中,今天分享的是Web前端,CSS背景图片大小.文字阴影.盒子阴影.过渡 背景图片大小 background-size:宽度 高度; 设置背景图片的大小 取值 场景 数字+px ...
- Html5文字阴影和盒子阴影
文字阴影 text-shadow: 定义:设置文本阴影的效果 语法:text-shadow:x轴方向的位置[向右的] y轴的位置[向下的] 模糊距离 颜色[默认跟文本的颜色一样] 有两个必须的属性值 ...
- 用css3做出好看的盒子阴影
<div class='docs-card'>盒子阴影</div> .docs-card {height: 194px;width: 30%;background-color: ...
- 阴影：盒子阴影（box-shadow）和文字阴影（text-shadow）
1.text-shadow(文本阴影先写颜色) text-shadow :gray 5px 5px 10px text-shadow:color x-offset(阴影向右移) y-offset(阴影 ...
- div添加阴影（盒子阴影）box-shadow各参数含义
box-shadow: h-shadow v-shadow blur spread color; 五个参数含义: h-shadow 必需的.水平阴影的位置.允许负值 v-shadow 必需的.垂直阴影 ...
- CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影
本篇文章为 CSS 基础系列笔记第三篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS阴影属性-文字阴影 盒子阴影
文字阴影 在css3中通过text-shadow属性实现对页面中的文字添加阴影效果 语法格式 text-shadow:水平距离 垂直距离 阴影的模糊半径 阴影的颜色 其中水平距离和垂直距离为必填选项, ...
最新文章
- c语言程序可以单独编译,c语言的函数能单独进行编译吗？
- JS中setAttribute的兼容性问题（摘自leejersey）
- 《Ray Tracing in One Weekend》——Chapter 2: The vec3 class
- html中div圆角效果,div+css实现圆角即网页上常用的圆角效果
- RTKLIB（二）——RTKPOST
- 八、管道弯头中流体混合流动与传热
- Oracle RAC 安装指北 10gR2+OEL5.11
- 设计师的色彩搭配指南
- Android必知必会-长按返回健退出
- 有源雷达与无源雷达、主动雷达与被动雷达
- 打开.pdm文件的工具
- （C++）将数据库文件导出XML文件以及解析XML文件生成数据库文件的处理方法
- 【LeetCode】971. Flip Binary Tree To Match Preorder Traversal
- orange_我的Orange Box版税在哪里？
- 魔兽争霸III：冰封王座 1.17版问世
- 【基于TCP 在线电子词典】
- java能开发硬件程序吗，跳槽薪资翻倍
- 雷达信号处理算法：静态杂波滤除（附MATLAB代码和数据）
- 数车计算机编程教学caxa,CAXA数车加工流程
- 水电站机电设备与自动化类毕业论文文献有哪些？