html+css实现：渐变、发光、网格、

最新推荐文章于 2024-09-19 16:37:46 发布

神经兮兮的小饼

最新推荐文章于 2024-09-19 16:37:46 发布

阅读量3.6k

点赞数 3

分类专栏：前端

本文链接：https://blog.csdn.net/Abbey_qi/article/details/99671816

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、背景渐变 CSS linear-gradient() 函数

1、CSS 语法

background: linear-gradient(direction, color-stop1, color-stop2, ...);

值	描述
direction	用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

2、例子

1）上下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
    background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
</style>
</head>

<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色:</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>

2）左右

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red , blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 从左到右</h3>
<p>从左边开始的线性渐变。起点是红色，慢慢过渡到蓝色：</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

3）左上角到右下角的线性渐变

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 to 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 to 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准语法 */
}

4）指定一个角度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 100px;
    background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(0deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad2 {
    height: 100px;
    background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad3 {
    height: 100px;
    background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}

#grad4 {
    height: 100px;
    background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
    background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

5）多个终止色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 55px;
    background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
渐变背景
</div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

6）透明度

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>

<h3>线性渐变 - 透明度</h3>
<p>为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。</p>

<div id="grad1"></div>

<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>
</html>

7）具有指定的任意停止

例子7来自：https://www.cnblogs.com/zhaodifont/p/3811514.html

该作者写的蛮清晰的，可以去看看

8）其他

该链接文章写了关于Background:linear-gradient()用法其他有意思的例子。

https://www.jianshu.com/p/adcaa9df334d

https://blog.csdn.net/liyu1059915776/article/details/83384569 HTML5之linear-gradient背景颜色搭配

二、发光（外发光与内阴影）

Style boxShadow 属性向 div 元素添加阴影：

document.getElementById("myDIV").style.boxShadow="10px 20px 30px blue";

语法

返回 boxShadow 属性：

object.style.boxShadow

设置 boxShadow 属性：

object.style.boxShadow="none|h-shadow v-shadow blur spread color |inset|initial|inherit"

注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

属性值

值	描述
none	默认值。不显示阴影。
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。默认值是黑色。如需了解可能的颜色值的完整列表，请参阅 CSS 颜色值。注意：在 Safari（在 PC 上）浏览器中，color 参数是必需的。如果您未指定颜色，则不显示阴影。
inset	可选。将外部阴影（outset）改为内部阴影。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

技术细节

默认值：	none
返回值：	字符串，表示元素的 box-shadow 属性。
CSS 版本	CSS3

CSS 参考手册：box-shadow 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            margin: 20px;
        }
    </style>
</head>
<body>
<div style="box-shadow: 0 0 10px #f00; border:1px solid green"></div>
<div style="box-shadow:4px 4px 10px #f00; border:1px solid green"></div>
<div style="box-shadow:-4px -4px 10px #f00; border:1px solid green"></div>
<div  style="box-shadow:-10px 0px 10px red,   /*左边阴影*/
                        0px -10px 10px #000,  /*上边阴影*/
                        10px 0px 10px green,  /*右边阴影*/
                        0px 10px 10px blue;   /*下边阴影*/"></div>
<!--内阴影-->
<div style="box-shadow: 0px 0px 10px red inset; border:1px solid green"></div>
</body>
</html>

三、网格

css3实现网格背景,background-image，background-size

用纯css3实现网格背景，应该怎么做呢？

需要给容器设置background-image,background-size属性

.container{
            background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%), 
　　　　　　　　　　　　　　　　　　linear-gradient(rgba(200, 0, 0, 0.15) 10%, rgba(0, 0, 0, 0) 10%);
            background-size: 10px 10px;
            width: 600px;
            height: 300px;
        }

background-image 属性为元素设置背景图像。

元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。

background-size 规定背景图像的尺寸

一般值为： background-size: length|percentage|cover|contain;

length: 设置背景图像的高度和宽度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

percentage: 以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度，第二个值设置高度。

如果只设置一个值，则第二个值会被设置为 "auto"。

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。