text-shadow
语法:text-shadow:h-shadow v-shadow blur color;
ie9包含以下都不支持该用法
h-shadow表示水平阴影的位置,允许负值,该值必需。
v-shadow表示垂直阴影的位置,允许负值,该值必需。
blur表示阴影的距离,color表示阴影的颜色,这两个值是可选的。
注意:
如果没有指定阴影颜色,那么将用元素的color属性值来替代;
阴影颜色值可以放在前面,实际上它们的位置是不固定的,但几个数值的顺序不能变,例如:
text-shadow:0.1em 0.1em 0.3em #333;和text-shadow:#333 0.1em 0.1em 0.3em;效果是一样的。
text-shadow属性可以接受一个以逗号分隔的阴影效果列表,并应用到该元素的文本上,阴影效果按照给定的顺序应用,因此有可能出现互相覆盖,但是它们永远不会覆盖文本本身,阴影效果不会改变边框的尺寸,但可能延伸到它的边界之外,阴影效果的堆叠层次和元素本身的层次是一样的;
可以用在:first-letter和:first-line等伪元素上。
gredient:
The <gradient> CSS data type is a special type of <image> that consists of a progressive transition between two or more colors
CSS数据类型<gradient>是<image>的一种特殊类型,它包含两个或多个颜色之间的渐变
基本用法:
background: linear-gradient(#0000, #3f87a6,);
background: radial-gradient(#f69d3c, #3f87a6);
background: repeating-linear-gradient(#f69d3c, #3f87a6 10px);
background: repeating-radial-gradient(#f69d3c, #3f87a6 50px);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div{
background: linear-gradient(#000000,#FFFFFF);
}
.linear-repeat {
background: repeating-linear-gradient(to top left,
black,black 5px,white 5px, white 10px);
}
.radial-repeat {
background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}
div {
width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
/*渐变黑色*/
.test {
background: linear-gradient(top,#fff, #333);
}
.test2 {
background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
background: linear-gradient(to top left, #000 20%, #f00 50%, #090 80%);
}
.test4 {
background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
background: linear-gradient(to top right, #000, #f00 50%, #090);
}
</style>
</head>
<body>
<div style="width: 200px;height: 200px;"></div>
<div class="linear-repeat" style="width: 200px;height: 200px;"></div>
<div class="radial-repeat" style="width: 200px;height: 200px;"></div>
<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
</body>
</html>
上面的代码,有没有大神给解答下什么意思,这个属性看了好久没怎么看懂
box-shadow
向 div 元素添加 box-shadow:
div { box-shadow: 10px 10px 5px #888888; }
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
<!DOCTYPE html>
<hmtl>
<head>
<meta charset="utf-8">
<style>
div{
width: 200px;
height:200px;
background: pink;
/*inset 将外部阴影 (outset) 改为内部阴影*/
box-shadow: 10px 10px 20px 5px black ;
//box-shadow:10px 10px 20px 5px black 参数表示水平阴影的距离(h-shadow),
垂直阴影的距离(v-shadow)这两个是必须的,后面是阴影的模糊距离(blur),和阴影的尺寸(spread),还有颜色color
} </style> </head> <body> <div > </div> </body></hmtl>