前端开发 \ CSS3 \ CSS3——box-shadow

CSS3——box-shadow

总点击71
简介:box-shadow属性向框添加一个或多个阴影。默认值:none 继承性:no JavaScript语法:object.style.boxShadow=\"10px10px5px#888888\"

box-shadow 属性向框添加一个或多个阴影。

默认值:none


继承性:no


JavaScript 语法:object.style.boxShadow="10px 10px 5px #888888"


语法

box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表,每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

h-shadow必需。水平阴影的位置。允许负值。正值向右,负值向左。 v-shadow必需。垂直阴影的位置。允许负值。正值向下,负值向上。 blur可选。模糊距离。 spread可选。阴影的尺寸。 color可选。阴影的颜色。请参阅 CSS 颜色值。 inset可选。将外部阴影 (outset) 改为内部阴影。<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.box1{

width: 500px;

height: 500px;

background-color: yellow;

margin: 200px auto;

box-shadow: 30px 50px 20px 5px lawngreen;

}

.box2{

width: 500px;

height: 500px;

background-color: yellow;

margin: 0 auto;

box-shadow: -30px -50px 20px 5px lawngreen;

}

</style>

</head>

<body>

<div class="box1"></div>

<div class="box2"></div>

</body>

</html>

效果:


CSS3——box-shadow


意见反馈 常见问题 官方微信 返回顶部