CSS3基础效果

<a style="color:#A00;font-weight:bold;" href="https://my.oschina.net/u/2663968/blog/3061697">2019独角兽企业重金招聘Python工程师标准>>> </a>

1.表单与背景的层次分开，关键知识点：rgba。 就像这样：<a href="https://my.oschina.net/AnymoreCoder/blog/778730">登陆</a> 关键css代码：

   body{
      background: url(img.jpg) no-repeat bottom center;
   }
   form{
      background: rgba(0,0,0,0.2);
   }

2.设置透明度，opacity与rgba的区别 关键css代码：

      .div1{
         background-color:rgb(0,0,0);
         opacity: 0.5;
         color: #000000;
      }
      .div2{
         background-color: rgba(0,0,0,0.5);
         color: #000000;
      }

效果： 上图中的div1中是文本选中状态，不然根本看不见。所以opacity是设置选中元素及其子元素的不透明值，而rgba只设置选中元素。

3.圆角 关键css代码：

   div{
      -moz-border-radius: 25px;
      border-radius:25px;
   }

4.投影

关键css代码：

      .div1{
         background-color: rgb(72,72,72);
         -webkit-box-shadow: 2px 2px 0 0 rgba(72,72,72,1);
         -moz-box-shadow:2px 2px 0 0 rgba(72,72,72,1);
         box-shadow: 2px 2px 0 0 rgba(72,72,72,1);;
      }
//box-shadow: 水平偏移(正右负左) 垂直偏移(正下负商) 阴影模糊距离 阴影扩张距离 rgba颜色及透明度;

5.文本投影 关键css代码：

text-shadow: 3px 3px 1px rgba(0,0,0,0.5);

<ins class="adsbygoogle"></ins>

转载于:https://my.oschina.net/AnymoreCoder/blog/790174

原文地址：https://blog.csdn.net/weixin_34343689/article/details/92614503?ops_request_misc=&request_id=05e55bb2f8da494bbe3073635dd9e3e3&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-29-92614503-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88