Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 视频二区在线观看,日韩在线电影,高清在线一区二区 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          從淺到深的學習 CSS3陰影(box-shadow)
          
        
           
          
	
	
          
		
                        
          您2019豬事順利，心想事成。
          前言
          前面兩篇文章都有提到過box-shadow，里面也有很多的基礎知識，有看過的小伙伴應該都有或多或少的收獲吧，今天我們再從基礎入手，希望能讓大家更熟悉它。
          沒有看過之前文章的小伙伴請點擊：
          CSS3 box-shadow實現背景動畫
          CSS3動畫解析抖音 LOGO制作
          下面我們從最基礎的開始演示。
          單側投影
          關鍵點: 1、外 box-shadow 前四個參數：x 偏移值、y 偏移值 、模糊半徑、擴張半徑。 2、單側投影的核心是第四個參數：擴張半徑。這個參數會根據你指定的值去擴大或縮小投影尺寸，如果我們用一個負的擴張半徑，而他的值剛好等于模糊半徑，那么投影的尺寸就會與投影所屬的元素尺寸完全一致，除非使用偏移量來移動他，否則我們將看不到任何投影。
          <style>
.left {
 box-shadow: -8px 0 5px -5px #333;
}

.right {
 box-shadow: 8px 0 5px -5px #333;
}

.top {
 box-shadow: 0 -8px 5px -5px #333;
}

.bottom {
 box-shadow: 0 8px 5px -5px #333;
}
</style>
<div class='left'>左</div>
<div class='right'>右</div>
<div class='top'>上</div>
<div class='bottom'>下</div>

          立體文字陰影
          知識點： 
          1、立體文字陰影的關鍵點在于多層 text-shadow 的疊加 
          2、合理運用了 SASS 函數來自動計算多層 text-shadow 的 CSS 代碼 
          3、運用了 Sass 的顏色函數，漸進實現層級陰影顏色 - fade-out: 改變顏色的透明度，讓顏色更加透明 - desaturate: 改變顏色的飽和度值，讓顏色更少的飽和
          4、HSL(顏色值)
          • H：Hue(色調)。0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數值來指定顏色。取值為：0 - 360
          • S：Saturation(飽和度)。取值為：0.0% - 100.0% 
          •  L：Lightness(亮度)。取值為：0.0% - 100.0%
          <style>
@function blessing($color) {
 $val: 0px 0px $color;
 @for $i from 1 through 50 {
 $color: fade-out(desaturate($color, 1%), .02);
 $val: #{$val}, -#{$i}px #{$i}px #{$color};
 }
 @return $val;
}

div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: blessing(hsl(0, 100%, 50%));
 color: hsl(14, 100%, 60%);
}
</style>
<div>福</div>

          編譯后的css(推薦scss在線編譯為css工具) https://www.sassmeister.com/
          ...
div {
 text-align: center;
 font-size: 20vmin;
 line-height: 45vh;
 text-shadow: 0px 0px #992400, 
 1px 1px rgba(152, 36, 1, 0.98), 
 2px 2px rgba(151, 37, 2, 0.96), 
 3px 3px rgba(151, 37, 2, 0.94), 
 ...
 ...
 ... 
 49px 49px rgba(116, 56, 37, 0.02), 
 50px 50px rgba(115, 56, 38, 0);
 color: #ff6333;
}

          從淺到深的學習 CSS3陰影(box-shadow)
          從淺到深的學習 CSS3陰影(box-shadow)
          線性漸變模擬長陰影
          知識點 
          1、借用了元素的兩個偽元素 
          2、通過漸變色填充兩個偽元素，再通過位移、變換放置在合適的位置
          <style>
div {
 position: relative;
 width: 30vmin;
 height: 30vmin;
 line-height: 30vh;
 text-align: center;
 font-size: 30px;
 background: #fff;
 margin: 30vmin auto;
}

div::before,
div::after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: -1;
}

div::before {
 content: ':before';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 50%;
 transform: translate(100%, 0) skewY(45deg) scaleX(.6);
 background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent);
}

div::after {
 content: ':after';
 font-size: 30px;
 text-align: center;
 line-height: 30vh;
 transform-origin: 0 0;
 transform: translate(0%, 100%) skewX(45deg) scaleY(.6);
 background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent);
}
</style>
<div>Web秀</div>

          從淺到深的學習 CSS3陰影(box-shadow)
          漸變實現內切角
          知識點
           1、陰影實現的關鍵點在于使用偽元素絕對定位在容器的一角，元素本身透明，陰影擴散開形成內切圓角效果 
          2、陰影實現缺點，單個標簽最多只能是2個內切圓角 
          3、徑向漸變實現內切圓角可以是4邊
          <style>
div {
 position: relative;
 width: 20vw;
 height: 8vw;
 margin: 1vw auto;
 border-radius: 1vmin;
 overflow: hidden;
 line-height: 8vw;
 color: #fff;
 text-align: center;
}

.shadow::before {
 position: absolute;
 content: "";
 top: -2vw;
 left: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.shadow::after {
 position: absolute;
 content: "";
 bottom: -2vw;
 right: -2vw;
 width: 4vw;
 height: 4vw;
 border-radius: 50%;
 box-shadow: 0 0 0 15vw #e91e63; 
 z-index: -1;
}

.linear {
 background-size: 70% 70%;
 background-image: 
 radial-gradient(
 circle at 100% 100%, 
 transparent 1vw, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 100% 0, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw),
 radial-gradient(
 circle at 0 100%, 
 transparent 0, 
 transparent 2vw, 
 #03A9F5 2vw);
 background-repeat: no-repeat;
 background-position: 
 right bottom, 
 left top, 
 right top, 
 left bottom;
}
</style>
<div class="shadow">陰影實現缺點最多是2邊</div>
<div class="linear">徑向漸變內切圓角4邊</div>

          從淺到深的學習 CSS3陰影(box-shadow)
          圓環進度條動畫
          知識點 ：圓環進度條的移動本質上是陰影順序延時移動的結果。
          <style>
body {
 background: #000;
}

.container {
 position: relative;
 overflow: hidden;
 width: 124px;
 height: 124px;
 overflow: hidden;
 margin: 100px auto;
 border-radius: 50%;
}

.shadow {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 120px;
 height: 120px;
 line-height: 120px;
 border-radius: 50%;
 color: #fff;
 font-size: 20px;
 cursor: pointer;
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63;
 text-align: center;
}
.shadow:hover {
 animation: border 0.5s ease forwards;
}

@keyframes border {
 0% {
 box-shadow: 
 60px -60px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px transparent;
 }
 25% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -60px -60px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 50% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 -60px 60px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 75% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 60px 60px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
 100% {
 box-shadow: 
 0 -125px 0 2px #e91e63, 
 -125px 0px 0 2px #e91e63, 
 0px 125px 0 2px #e91e63, 
 120px 40px 0 2px #e91e63, 
 0 0 0 2px #fff;
 }
}
</style>
<div class="container">
 <div class="shadow">web 秀</div></div>
</div>

          從淺到深的學習 CSS3陰影(box-shadow)
          公告
          喜歡小編的點擊關注，了解更多知識！
          源碼地址和源文件下載請點擊下方“了解更多”
          ext-shadow是CSS3新增屬性，該屬性可以為頁面中的文本添加陰影效果。text-shadow屬性的基本語法格式如下：
          選擇器{text-shadow:h-shadow v-shadow blur color;}
          在上面的語法格式中，h-shadow用于設置水平陰影的距離，v-shadow用于設置垂直陰影的p距離，blur用于設置模糊半徑，color用于設置陰影顏色。
          下面通過一個案例來演示text-shadow屬性的用法，如例所示。
          example.html
          <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>text-shadow屬性</title>
<style type="text/css">
P{
  font-size: 50px;
  text-shadow:10px 10px 10px red; /*設置文字陰影的距離、模糊半徑和顏色*/
}
</style>
</head>
<body>
<p>Hello CSS3</p>
</body>
</html>
          上述代碼中，第9行代碼用于為文字添加陰影效果，設置陰影的水平和垂直偏移距離為10px，模糊半徑為10px，陰影顏色為紅色。
          運行代碼效果如下圖所示：
          可以看出，文本右下方出現了模糊的紅色陰影效果。此外，當設置陰影的水平距離參數或垂直距離參數為負值時，可以改變陰影的投射方向。
          注意：
          陰影的水平或垂直距離參數可以設為負值，但陰影的模糊半徑參數只能設置為正值，并且數值越大陰影向外模糊的范圍也就越大。
          設置多個陰影疊加效果
          我們可以使用text-shadow屬性給文字添加多個陰影，從而產生陰影疊加的效果。設置陰影疊加的方法非常簡單，我們只需設置多組陰影參數，中間用逗號隔開即可，例如，想要對段落設置紅色和綠色陰影疊加的效果，可以將p標簽的樣式更改為：
          P{
  font-size:32px;
  text-shadow:10px 10px 10px red,20px 20px 20px green; /*紅色和綠色的投影疊加*/
}
          在上面的代碼中，為文本依次指定了紅色和綠色的陰影效果，并設置了陰影的位置和模糊數值。陰影疊加效果如圖所示。
          家都知道，現在普遍通用的就是 HTML5 和 CSS3 了，今天就帶大家看看 CSS3 的效果。
          CSS3 文本效果
          CSS3中包含幾個新的文本特征。下面蘇蘇老師會給大家講解以下文本屬性：
          text-shadow
          box-shadow
          text-overflow
          word-wrap
          word-break
          瀏覽器支持
          CSS3 的文本陰影
          CSS3 中，text-shadow屬性適用于文本陰影。
          （效果圖）
          我們指定了水平陰影，垂直陰影，模糊的距離，以及陰影的顏色：
          實例教程：
          1.給標題添加陰影
          h1
          {
           text-shadow: 5px 5px 5px #FF0000;
          }
          CSS3 box-shadow屬性，CSS3 中 CSS3 box-shadow 屬性適用于盒子陰影
          div 
          {
           box-shadow: 10px 10px 5px #888888;
          }
          2.接下來給陰影添加顏色
          div
           {
           box-shadow: 10px 10px grey;
          }
          3.接下來再給陰影添加一個模糊效果
          div
           {
           box-shadow: 10px 10px 5px grey;
          }
          你也可以在 ::before 和 ::after 兩個偽元素中添加陰影效果
          代碼如下
          #boxshadow {
           position: relative;
           b ox-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
           pa dding: 10px;
           bac kground: white;
          }
           #boxshadow img {
           width: 100%;
           border: 1px solid #8a4419;
           border-style: inset;
          } 
          #boxshadow::after {
           content: '';
           position: absolute;
           z-index: -1; /* hide shadow behind image */
           box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3); width: 70%;
           left: 15%; /* one half of the remaining 30% */ height: 100px;
           bottom: 0;
          }
          陰影的一個使用特例是卡片效果
          div.card {
           width: 250px;
           box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
           text-align: center;
          }
          CSS3 Text Overflow屬性，是CSS3文本溢出屬性指定應向用戶如何顯示溢出內容。
          代碼如下
          p.test1 {
           white-space: nowrap;
           width: 200px;
           border: 1px solid #000000;
           overflow: hidden;
           text-overflow: clip;
           }
           p.test2 {
           white-space: nowrap;
           width: 200px;
           border: 1px solid #000000;
           overflow: hidden;
           text-overflow: ellipsis;
          }
          CSS3的換行
          如果某個單詞太長，不適合在一個區域內，它擴展到外面：
          CSS3中，自動換行屬性允許您強制文本換行 - 即使這意味著分裂它中間的一個字：
          CSS代碼如下
          p {word-wrap:break-word;}
          CSS3 單詞拆分換行屬性指定換行規則
          CSS代碼如下
          p.test1 {
           word-break: keep-all;
          }
           p.test2 {
           word-break: break-all;
          }
          新文本屬性
          總結：CSS3真的很好用！很多CSS2實現不了的都能用CSS3實現~
          有什么問題和建議可以私信小編:"666"
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩精品电影一区|
国产精品无码一区二区三区毛片
|
日本免费一区二区三区四区五六区
|
亚洲AV无码一区二区大桥未久|
色久综合网精品一区二区|
国产日韩精品视频一区二区三区|
国产精品一区二区无线|
日本不卡在线一区二区三区视频
|
亚洲国产精品一区二区久|
国产一区二区三区电影|
人妻aⅴ无码一区二区三区|
福利片福利一区二区三区|
无码人妻精品一区二区三区99仓本
|
福利一区二区在线|
狠狠做深爱婷婷久久综合一区|
国产一区二区免费视频|
台湾无码AV一区二区三区|
国产在线精品一区在线观看|
精品一区高潮喷吹在线播放|
伊人色综合一区二区三区|
无码人妻精品一区二|
无码人妻精品一区二区三区99不卡|
亚洲国产成人久久一区二区三区|
无码少妇一区二区三区浪潮AV|
丰满人妻一区二区三区免费视频|
在线观看国产一区亚洲bd|
国内精自品线一区91|
日本v片免费一区二区三区
|
亚洲国产高清在线一区二区三区
|
精品亚洲AV无码一区二区|
中文字幕一区二区人妻性色|
中文字幕一区日韩在线视频|
亚洲一区二区高清|
国产成人无码精品一区二区三区|
精品亚洲A∨无码一区二区三区|
亚洲性日韩精品一区二区三区
|
亚洲国产成人久久综合一区|
一本一道波多野结衣AV一区|
天堂va在线高清一区|
八戒久久精品一区二区三区|
麻豆一区二区三区蜜桃免费|