zoukankan      html  css  js  c++  java
  • css3_box-shadow使用记录

    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

    实现如下的效果图:

  • 相关阅读:
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    [译]GLUT教程
    表单
    列表、表格与媒体元素
    HTML5基础
  • 原文地址:https://www.cnblogs.com/wush-1215/p/8652506.html
Copyright © 2011-2022 走看看