text-shadow &lt;gradient&gt; box-shadow

最新推荐文章于 2023-03-13 11:18:45 发布

woyuanliulian

最新推荐文章于 2023-03-13 11:18:45 发布

阅读量185

点赞数

分类专栏： Web前端文章标签： web

本文链接：https://blog.csdn.net/woyuanliulian/article/details/80908561

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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>

woyuanliulian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
text-shadow &lt;gradient&gt; box-shadow

语法：text-shadow:h-shadow v-shadow blur color;ie9包含以下都不支持该用法h-shadow表示水平阴影的位置，允许负值，该值必需。v-shadow表示垂直阴影的位置，允许负值，该值必需。blur表示阴影的距离，color表示阴影的颜色，这两个值是可选的。注意：如果没有指定阴影颜色，那么将用元素的color属性值来替代；阴影颜色值可以放在前面，实际上它们的位...
复制链接

扫一扫