5分钟让你把握css3黑影、倒映、渐变色小窍门(网

日期:2021-03-03 类型:科技新闻 

关键词:如何创建网站,免费网站建站,网站建设文章,网站建设7个基本流程,自动建站

做:

2、起先创建两个文字不做解决运作如图

3、给第1个div字体样式再加黑影

text-shadow: 5px 5px 10px red; 

text-shadow: 5px 5px 5px red,5px ⑸px 10px yellow;
box-shadow:用法与text-shadow相近,只但是它是对盒子,例如DIV
text-shadow:[色调(Color)  x轴(X Offset) y轴(Y Offset) 模糊不清半径(Blur)],[色调(color) x轴(X Offset) y轴(Y Offset) 模糊不清半径(Blur)]...前两个值能够是负数,第3个不可以使负数,能够是0(失效果)

 

4、给第1个div再加倒映

-webkit-box-reflect:below 10px ;

方位 (above上 below下 上下left right) 间隔。

留意:倒映不占文本文档流的室内空间,等级高于文本文档流倒映是对于标识(宽高)开展的

5、再加渐变色

background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );

第1个百分数是从0%到这个百分数都是这类色调,最终1个百分比为从这个百分数到100%都是这类色调,正中间假如不一样百分数便是渐变色,1样便是分界限。

6、全部编码:  

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF⑻">    
  5.         <title>CSS3</title>    
  6.         <style type="text/css">    
  7.             div{    
  8.                 font-size: 30px;    
  9.                 width: 300px;    
  10.                 height: 100px;    
  11.                 background-image: -webkit-linear-gradient(left, red 0%, yellow 50% );    
  12.                 /*渐变色*/    
  13.                 color: blue;    
  14.                 -webkit-box-reflect:below 10px ;    
  15.                 /*倒映*/    
  16.                 text-shadow: 5px 5px 10px red;    
  17.                 /*黑影*/    
  18.             }    
  19.             span{    
  20.                 background: aqua;    
  21.             }    
  22.                  
  23. </style>    
  24.     </head>    
  25.     <body>    
  26.         <div>    
  27.             <p>我会翻跟斗!!哈哈哈</p>    
  28.         </div>    
  29.         <span>    
  30.             倒映不可以掌握的部位给占了!倒映不可以掌握的部位给占了!    
  31.             倒映不可以掌握的部位给占了!倒映不可以掌握的部位给占了!    
  32.         </span>    
  33.     </body>    
  34. </html>  

以上这篇5分钟让你把握css3黑影、倒映、渐变色小窍门(网编强烈推荐)便是网编共享给大伙儿的所有內容了,期待能给大伙儿1个参照,也期待大伙儿多多适用脚本制作之家。

上一篇:浅谈css解决水平垂直居中的难题 返回下一篇:没有了