码迷,mamicode.com
首页 > Web开发 > 详细

css3_box-shadow使用记录

时间:2018-03-26 19:11:09      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:oct   blur   bubuko   image   span   实现   open   比较   sed   

1、box-shadow这个属性有6个参数可设置,使用的时候比较少用,每次使用的时候都会忘记,故写此文作记录。

样式:

1 /*1.添加此属性添加阴影*/
2 box-shadow: 0 0 10px 10px blue;
3 /*box-shadow: h-shadow v-shadow blur spread color inset;*/
4 /*三个参数:1.垂直距离 2.水平距离 3.模糊距离  4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/

 

全部代码:

技术分享图片
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 height: 100px;
 9                 width: 100px;
10                 border: 2px solid black;    
11                 
12                 /*1.添加此属性添加阴影*/
13                 box-shadow: 0 0 10px 10px blue;
14                 /*box-shadow: h-shadow v-shadow blur spread color inset;*/
15                 /*三个参数:1.垂直距离 2.水平距离 3.模糊距离  4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/
16                 
17                 
18                 
19                 margin: 100px auto;
20             }
21         </style>
22     </head>
23     <body>
24         <div id="box"></div>
25     </body>
26 </html>
View Code

 

实现如下的效果图:

技术分享图片

 

css3_box-shadow使用记录

标签:oct   blur   bubuko   image   span   实现   open   比较   sed   

原文地址:https://www.cnblogs.com/wush-1215/p/8652506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!