box-shadow属性详解

box-shadow各参数设置效果图

box-shadow向框添加阴影。
box-shadow：h-shadow v-shadow blur spread color inset
h-shadow(必填): 水平方向阴影
v-shadow(必填): 垂直方向阴影
blur: 阴影模糊距离
spread: 阴影尺寸
color: 阴影颜色，默认为黑色(#000)
inset: 内阴影，设置后为内阴影，不设置为外阴影

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0px;margin: 0px;border: 0px;font-size: 14px;}div {width: 200px;border: 1px solid #000000;padding: 5px;line-height: 20px;}.box-basic {width: 400px;height: 200px;margin: 50px auto;box-shadow: 10px 10px 5px 10px #dedede,-10px -10px 5px #000;}.shadow-box {width: 1200px;display: flex;margin: 0px auto;justify-content: space-around;flex-wrap: wrap;}.box {width: 200px;height: 200px;margin: 30px;}.box1 {box-shadow: 5px 0px 0px #999999;}.box2 {box-shadow: 5px 0px 0px 10px #999999;}.box3 {box-shadow: 5px 0px 10px #000000;}.box4 {box-shadow: 5px 0px #999999 inset;}.box5 {box-shadow: 0px 0px 10px 10px #000000;}.box6 {box-shadow: -5px -5px 5px #999999;}.box7 {box-shadow: 0px 0px -5px -5px #000000;}.box8 {box-shadow: 5px 0px 0px #FF0000,0px 5px 0px #002afb,-5px 0px 0px #CCFF00,0px -5px 0px #000000;}</style>
</head>
<body><div class="box-basic"><p><pre>box-shadow: h-shadow v-shadow blur spread color inset;</pre></p><p><pre>h-shadow:   水平阴影位置(必填)</pre></p><p><pre>v-shadow:   垂直阴影位置(必填)</pre></p><p><pre>blur:       阴影模糊距离</pre></p><p><pre>spread:     阴影尺寸(默认0px)</pre></p><p><pre>color:      阴影颜色(默认为#000)</pre></p><p><pre>inset:      将外阴影转为内阴影</pre></p></div><div class="shadow-box"><div class="box box1"><p>box-shadow: 5px 0px 0px #999999;</p><p><pre>水平位置阴影5px</pre></p><p><pre>垂直位置阴影0px</pre></p><p><pre>阴影模糊距离0px</pre></p><p><pre>阴影尺寸0px</pre></p><p><pre>仅有右侧显示阴影</pre></p></div><div class="box box2"><p>box-shadow: 5px 0px 0px #999999;</p><p><pre>水平位置阴影5px</pre></p><p><pre>垂直位置阴影0px</pre></p><p><pre>阴影模糊距离0px</pre></p><p><pre>阴影尺寸10px</pre></p><p><pre>左侧阴影=阴影尺寸10px-水平位置阴影</pre></p><p><pre>右侧阴影=阴影尺寸10px+水平位置阴影</pre></p><p><pre>上侧阴影=阴影尺寸10px-垂直位置阴影</pre></p><p><pre>下侧阴影=阴影尺寸10px+垂直位置阴影</pre></p></div><div class="box box3"><p>box-shadow: 5px 0px 10px #000000;</p><p><pre>水平位置阴影5px</pre></p><p><pre>垂直位置阴影0px</pre></p><p><pre>阴影模糊距离10px</pre></p><p><pre>左侧模糊阴影=模糊距离-水平位置阴影</pre></p><p><pre>右侧模糊阴影=模糊距离+水平位置阴影</pre></p><p><pre>上侧模糊阴影=模糊距离-垂直位置阴影</pre></p><p><pre>下侧模糊阴影=模糊距离+垂直位置阴影</pre></p></div><div class="box box4"><p>box-shadow: 5px 0px #999999 inset;</p><p><pre>水平位置阴影5px</pre></p><p><pre>垂直位置阴影0px</pre></p><p><pre>阴影模糊距离0px</pre></p><p>inset设置内阴影后，计算距离左右颠倒，上下颠倒</p></div><div class="box box5"><p>box-shadow: 0px 0px 10px #000000;</p><p><pre>阴影模糊距离10px</pre></p><p><pre>阴影尺寸10px</pre></p><p><pre>阴影=阴影模糊距离+阴影尺寸</pre></p><p><pre>阴影模糊距离与阴影尺寸叠加</pre></p></div><div class="box box6"><p>box-shadow: -5px -5px 5px #999999;</p><p><pre>水平位置阴影-5px</pre></p><p><pre>垂直位置阴影-5px</pre></p><p><pre>阴影方向向左向上</pre></p><p><pre>水平位置阴影小于0则向左</pre></p><p><pre>垂直位置阴影小于0则向上</pre></p></div><div class="box box7"><p>box-shadow: 0px 0px -5px -5px #000000;</p><p><pre>阴影模糊距离小于0不显示</pre></p><p><pre>阴影尺寸小于0不显示</pre></p></div><div class="box box8"><p>box-shadow: 5px 0px 0px #FF0000,0px 5px 0px #002afb,-5px 0px 0px #CCFF00,0px -5px 0px #000000;</p><p><pre>box-shadow属性以逗号隔开可以叠加</pre></p></div></div>
</body>
</html>

box-shadow属性详解相关推荐

jquery方法属性详解
jquery方法属性详解! 1.jquery简介 jquery是什么,作用是什么? jquery用来简化js操作DOM元素 jquery不能用DOM的方法,DOM不能用jquery的方法各种选择器的 ...
弹性盒子（flexbox）布局属性详解
弹性盒子布局属性详解 1 弹性盒子概述 2 基本概念 3 常用属性 3.1 布局方向flex-direction 3.2 环绕效果flex-wrap 3.3 水平对齐方式justify-content ...
python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
spring MVC请求处理类注解属性详解
spring MVC请求处理类注解属性详解
Meta http-equiv属性详解
Meta http-equiv属性详解博客分类: Web综合 HTML浏览器IECache搜索引擎 http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮 ...
JavaScript Function.arguments 属性详解
转载自 JavaScript Function.arguments 属性详解 arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用 ...
vertical-align属性详解
vertical-align属性详解:http://www.cnblogs.com/wcp-spring/archive/2013/03/04/2942456.html 关于vertical-alig ...
border-sizing属性详解和应用
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...
/etc/shadow 文件详解
/etc/shadow 文件详解用户帐户本身在 /etc/passwd 中定义.Linux 系统包含一个 /etc/passwd 的同伴文件,叫做 /etc/shadow.该文件不像 /etc/pa ...
Flash播放控件属性详解
Flash 播放控件属性详解一.属性篇 1.AlignMode(读写) 语法:AlignMode As Long 说明:对齐方式(与SAlign 属性联动).当控件的长宽比例与影片不一致且WMo ...

box-shadow属性详解

box-shadow各参数设置效果图

具体实现代码

box-shadow属性详解相关推荐

最新文章

热门文章