css阴影属性设置

最新推荐文章于 2024-06-21 11:27:52 发布

前端小云儿

最新推荐文章于 2024-06-21 11:27:52 发布

阅读量778

点赞数

分类专栏： css 文章标签： css html5 html

本文链接：https://blog.csdn.net/jieweiwujie/article/details/119964074

版权

css 专栏收录该内容

75 篇文章 1 订阅

订阅专栏

<!doctype html>
<html>

   <head>
       <meta charset="utf-8">
       <title>弹框原生使用z-index是必须先定位</title>
       <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
       <link href="../css/mui.min.css" rel="stylesheet" />
       <style>
           .div0{box-shadow: 0px 0px 3px rgba(0,0,0,0.3);}
           .div1{
               width: 200px;
               height: 200px;
               box-shadow:rgb(158, 219, 235) 0px 0px 10px;/* //将h-shadow,v-shadow设为0px,实现四周阴影 */
               margin: 40px;
               }
               .div2{
               width: 200px;
               height: 200px;
               box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div3{
               width: 200px;
               height: 200px;
               box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div4{
               width: 200px;
               height: 200px;
               box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div5{
               width: 200px;
               height: 200px;
               box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div6{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div7{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 30px 0px rgb(158, 219, 235) ;
               margin: 40px;
               }
               .div8{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 60px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div9{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div10{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 30px 30px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div11{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 60px 60px rgba(0,0,0,0.5) ;
               margin: 40px;
               }
               .div12{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 60px 60px red ;
               margin: 40px;
               }
               .div13{
               width: 200px;
               height: 200px;
               box-shadow: 0px 0px 6px 6px red inset ;
               margin: 40px;
               }
               .div14{
                   width: 200px;
                   height: 200px;
                   margin: 40px;
                   box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影红色*/

                   -10px 0px 0px 0px #3bee17, /*左边阴影绿色*/

                   10px 0px 0px 0px #2279ee, /*右边阴影蓝色*/

                   0px 10px 0px 0px #eede15; /*下边阴影黄色*/
               }
                               </style>
   </head>

<body>
       <header class="mui-bar mui-bar-nav">
           <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
           <h1 class="mui-title">弹框原生</h1>
       </header>
       <div class="mui-content">
           
           <div class="div1" > box-shadow: offset-x offset-y blur spread color position;</div>
           <div class="div2" > .offset-x
第一个长度值指明了阴影水平方向的偏移，即阴影在 x 轴的位置。值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧。;</div>
           <div class="div3" > box-shadow: offset-x offset-y blur spread color position;</div>
           <div class="div4" > .offset-y
第二个长度值指明了阴影竖直方向的偏移，即阴影在 y 轴的位置。值为正数时，阴影在元素的下方；值为负数时，阴影在元素的上方。</div>
           <div class="div5" > box-shadow: offset-x offset-y blur spread color position;</div>
           <div class="div6" >blur
第三个长度值代表了阴影的模糊半径</div>
           <div class="div7" > blur
第三个长度值代表了阴影的模糊半径</div>
           <div class="div8" > blur
第三个长度值代表了阴影的模糊半径</div>
           <div class="div9" > spread
第四个长度代表了阴影扩展半径，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。前提是存在阴影模糊半径。</div>
       </div>
       <div class="div10" > spread 前提是存在阴影模糊半径。</div>
       <div class="div11" > 11spread，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小。前提是存在阴影模糊半径。</div>
       <div class="div12" > 颜色取值</div>
       <div class="div13" > 设置阴影类型为“inset”时，其投影就是内阴影。</div>


   <div >----------------------------------------------------------------</div>

   <div class="div14">设置四边不一样</div>
   </body>
   <script src="../js/mui.min.js"></script>
   <script>


   </script>

</html>

前端小云儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css阴影属性设置

<!doctype html><html> <head> <meta charset="utf-8"> <title>弹框原生使用z-index是必须先定位</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,u...
复制链接

扫一扫