CSS 盒子阴影和文字阴影

盒子阴影

CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影
语法：

box-shadow：h-shadow v-shadow blur spread color inset;

h-shadow:必需。水平阴影的位置。允许负值。
v-shadow:必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色
inset 可选。将外部阴影改为内部阴影

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.radius {width: 200px;height: 200px;background-color: pink;box-shadow: 10px 10px 10px 10px black ;}</style>
</head>
<body><div class="radius"></div>
</body>
</html>

注意：
1.默认的是外阴影(outset),但是不可以写这个单词，否则导致阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列。

文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本。
语法：

test-shadow：h-shadow v-shadow blur color;

h-shadow:必需，水平阴影的位置。允许为负值
v-shadow:必需，垂直阴影的位置。允许为负值
blur:可选。模糊的距离
color:可选。阴影的颜色

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">.radius {width: 200px;height: 200px;background-color: pink;font-size: 50px;text-shadow: 10px 10px 12px black;}</style>
</head>
<body><div class="radius">12123123</div>
</body>
</html>

CSS 盒子阴影和文字阴影相关推荐

css第4天笔记-圆角边框；盒子阴影；文字阴影；浮动；PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图一.其他样式 1.圆角边框在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
CSS圆角边框、盒子阴影及文字阴影详解
文章目录 1. 圆角边框 2. 盒子阴影 3. 文字阴影 1. 圆角边框在CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的外边框圆角. ...
CSS 阴影效果（盒子阴影，文字阴影）
总结: 盒子阴影和文字阴影可以理解为,在目标盒子下方,有另外一个盒子,两个盒子的位置和大小是一样的,所以平时是看不见的, box-shadow就是用来控制下面盒子的位置,大小和颜色的. 1. 盒子阴影 ...
HTML连载70-相片墙、盒子阴影和文字阴影
一. 制作一个相片墙二. <!DOCTYPE html><html lang="en"><head><meta charset=&quo ...
ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的,以后切图工作在ps完成. 综合案例图片不超出box(和父亲一样宽): 标签都是有语义的,标题要用h4,合理的地方用合理的标签. 每个盒子都取类名比较方便找到,利 ...
CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
CSS圆角边框、盒子阴影、文字阴影（01-07课）
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作代码: &l ...
CSS中的盒子阴影和文字阴影
去掉li前面的小圆点: list-style: none; 圆角边框:盒子编程圆角. 语法格式: border-radius: length; 写法: border-radius:50%;//变成圆形 ...
CSS阴影属性-文字阴影盒子阴影
文字阴影在css3中通过text-shadow属性实现对页面中的文字添加阴影效果语法格式 text-shadow:水平距离垂直距离阴影的模糊半径阴影的颜色其中水平距离和垂直距离为必填选项, ...

CSS 盒子阴影和文字阴影

目录

盒子阴影

文字阴影

CSS 盒子阴影和文字阴影相关推荐

最新文章

热门文章