阴影 box-shadow

简介: 语法: box-shadow:none | [ , ]* = inset? && {2,4} && ? 默认值:none 适用于:所有元素 继承性:无 动画性:是,除了内、外阴影切换时 计算值:指定值   取值: none:无阴影 ①: 第1个长度值用来设置对象的阴影水平偏移值。

语法:

box-shadow:none | <shadow> [ , <shadow> ]*

<shadow> = inset? && <length>{2,4} && <color>?

默认值:none

适用于:所有元素

继承性:无

动画性:是,除了内、外阴影切换时

计算值:指定值

 

取值:

none:无阴影
<length>①: 第1个长度值用来设置对象的阴影 水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影 垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的 阴影模糊值。不允许负值
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
 

说明:

设置或检索对象阴影。参阅 <' text-shadow '> 属性

  • 可以设定多组效果,每组参数值以逗号分隔。
  • 对应的脚本特性为boxShadow

 

image

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>box-shadow 阴影</title>
    <style type="text/css">
    .sample{
        width: 200px;
        height: 300px;
        background-color: #f1f1f1;
        box-shadow: 50px 0px 0px 50px blue;
        margin: 200px;
    }
    </style>
</head>
<body>
<div class="sample"></div>
</body>
</html>

image

 

阴影大小是在 水平偏移后 给 200px * 300px的 原DIV 增加的阴影边框

 

 

不信?  你就把  水平偏移 设置为 0px 看看。

.sample{
    width: 200px;
    height: 300px;
    background-color: #f1f1f1;
    box-shadow: 0px 0px 0px 50px blue;
    margin: 200px;
}

 

box-shadow 阴影公式-无偏移(标注)

开始做,坚持做,重复做
相关文章
css3中的圆角border-radius
css3中的圆角border-radius
|
7月前
|
前端开发
css3阴影box-shadow
css3阴影box-shadow
|
6月前
|
Web App开发 iOS开发
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
CSS3 给边框添加阴影 -- box-shadow属性
139 1
怎样给边框添加阴影?CSS3属性box-shadow帮你搞定!
|
12月前
|
前端开发
css:border-radius绘制边框圆角-全圆和椭圆
css:border-radius绘制边框圆角-全圆和椭圆
101 0
css:border-radius绘制边框圆角-全圆和椭圆
CSS 04 盒子阴影效果box-shadow
box-shadow: h-shadow v-shadow blur spread color inset h-shadow 必须。水平阴影半径的位置,允许负值 v-shadow 必须。垂直半径阴影 blur 可选,模糊半径设置 color 可选,阴影颜色 inset 可选,内阴影 <div class="ceng rotate_left"> <img src='yjx.jpg' alt=''> <p> 上海鲜花港的郁金香,花名未闻 </p> </div> <div class="ceng rotate_right"> <img
|
前端开发 开发者
怪异盒模型border-box真的“一无是处”吗?
虽然w3c制定了标准盒模型,但在 `box-sizing` 属性中却还是保留了怪异盒模型,可能就是希望开发者在不同的场景中适当地运用,前提是如何理解它。
|
前端开发
css:box-shadow实现单边,多边阴影
css:box-shadow实现单边,多边阴影
186 0
css:box-shadow实现单边,多边阴影
|
前端开发
CSS3中border-radius、box-shadow与gradient那点事儿
border-radius用于添加圆角边框,用处非常广泛。
CSS3中border-radius、box-shadow与gradient那点事儿
|
Web App开发 前端开发 iOS开发
|
Web App开发 前端开发 iOS开发