zoukankan      html  css  js  c++  java
  • CSS 用before和after伪类选择器制作阴影

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <title>before、after</title>
    <style>
    .box h3{
      text-align:center;
      position:relative;
      top:80px;
    }
    .box {
      70%;
      height:200px;
      background:#FFF;
      margin:40px auto;
    }
    
    .effect{
      position:relative;  /*注意父相子绝*/     
        -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    	   -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    			box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }
    .effect::before, .effect::after{
        content:"";
    	position:absolute; 
    	z-index:-1;
    	-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    	-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    	box-shadow:0 0 20px rgba(0,0,0,0.8);
    	top:50%;
    	bottom:0;
    	left:10px;
    	right:10px;
    	-moz-border-radius:100px / 10px;
    	border-radius:100px / 10px;
    }
    </style>
    </head>
    <body>
      <div class="box effect">
      <h3>Shadow Effect </h3>
    </div>
    </body>
    </html>
    

      Border-radius:

    border-radius是一种缩写方法。如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径。如果没有“/”,则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现:

    1、border-radius: [ <length>{1,4} ]; //这里只有一个值,那么top-left、top-right、bottom-right、bottom-left四个值相等

    2、border-radius:[ <length>{1,4} ]  [ <length>{1,4} ] ; //这里设置两个值,那么top-left等于bottom-right,并且取第一个值;top-right等于bottom-left,并且取第二个值

    3、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]   [ <length>{1,4} ];//如果有三个值,其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right

    4、border-radius:[ <length>{1,4} ]   [ <length>{1,4} ]  [ <length>{1,4} ]   [ <length>{1,4} ];//如果有四个值,其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left

  • 相关阅读:
    css之深入理解padding
    css布局大杂烩
    css深入理解margin
    css之深入理解border
    css样式画各种图形
    css Sprite雪碧图
    JVM,JRE,JDK
    JAVA 遍历数组
    JAVA 得到数组的长度
    大一对软件工程
  • 原文地址:https://www.cnblogs.com/potato-lee/p/8511433.html
Copyright © 2011-2022 走看看