css3漸變之條紋背景

阿新 • • 發佈：2019-01-17

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>條紋背景</title>
  <style type="text/css">
	  * {
		box-sizing: border-box;
	  }
	  html,body {
		  
	      width: 100%;
		  height: 100%;
		  _height: 100%;
		  min-height: 100%;
		  margin: 0;
		  padding: 0;
	  }
	  .comm {
		  width: 100%;
		  height: 150px;
		  margin-bottom: 20px;
	  }
	  /* 兩種顏色橫條紋 */
	  .bg {
	      background: linear-gradient(#fb3 30%, #58a 0);
		  background-size: 100% 30px;
	  }
	  /* 多顏色橫條紋 */
	  .bg2 {
		  background: linear-gradient(#fb3 33.3%,#85a 0,#85a 66.6%,yellowgreen 0);
		  background-size: 100% 45px;
	  }
	  /* 垂直條紋(在水平條紋基礎上，新增一個額外的引數來指定漸變方向) */
	  .bg3 {
		  background: linear-gradient(to right,/* 或90deg */#fb3 50%, #58a 0);
		  background-size: 30px 100%;
	  }
	  /* 45度角斜向條紋背景 */
	  .bg4 {
		  background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);
		  background-size: 30px 30px;
	  }
	  /* 重複漸變 */
	  .bg5 {
		  background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
	  }
	  /* 使用重複漸變建立更加靈活的斜向背景，可以是45deg、60deg等 */
	  .bg6 {
	      background: repeating-linear-gradient(30deg,#79b, #79b 15px, #58a 0,#58a 30px);
	  }
  </style>
 </head>
 <body>
	<div class="bg comm"></div>
	<div class="bg2 comm"></div>
	<div class="bg3 comm"></div>
	<div class="bg4 comm"></div>
	<div class="bg5 comm"></div>
	<div class="bg6 comm"></div>
 </body>
</html>

css3漸變之條紋背景

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"

web前端小案例-css3制作瀏覽器背景漸變背

JavaScript 前端 css3 案例知識點：rgb全色循環算法，HEX與RGB顏色轉換算法、CSS3顏色漸變，CSS3漸變色兼容ie方法，定時器與循環，函數封裝,數組應用等。 css代碼： <style> *{margin:0;padding:0;}

css3 滑鼠hover事件背景顏色漸變

由於經常會用到寫按鈕的一些樣式，經常要重新寫，不如儲存一次，以後直接到這裡拿。執行的效果圖是這樣的：這是全部的程式碼，直接複製走就可以運行了。 <!DOCTYPE html> <html lang="en"> <head>

CSS3嚐鮮（二）：用CSS設定多個背景、背景漸變、指定背景大小

CSS3規範中對背景這一部分，新加入了一些令人興奮的功能，如可以設定多個背景圖片、可以指定背景大小、設定背景漸變等功能。CSS3規範中定義的背景屬性有：屬性名可能的值預設值是一種簡寫方式：bg-

5.CSS影象繪製之：條紋背景

CSS body { background:linear-gradient(#51B0E7 50%, #006084 50%); background-size:100% 20px; } CSS body { background:#FFF

CSS3屬性之圓角效果——border-radius屬性

20px con 一半正方 ace ring css key lpad 在css3之前，要實現圓角的效果可以通過圖片或者用margin屬性實現(可以參考這裏：http://www.hicss.net/css-practise-of-image-round-box/)。

quick-cocos2d-x教程9:實例之加上背景圖片

nbsp mod work .text eight zip function 大小 dto 在梳理完quick-cocos2d-x框架的各個文件夾後，我們開始我們的實例教程，在helloworld後面。加上一張圖片,lua編輯器，我用的lua editor。還不錯。

PS摳圖之單色背景圖片

自己的選中軟件取消 tro 很好每天快速 ctrl+v PS一直大家比較喜歡的一款圖像處理軟件，很多朋友對使用基本的功能。最近很多的朋友都在問我關於PS摳圖的方法，這些方法也不是一句兩句就能說清楚，並且每天都重復的叫他們，不如直接寫出來剛剛接觸到的朋友一起學習交流

CSS3屬性之text-overflow:ellipsis,指定多行文本中任意一行顯示...

插件技術分享分享 http white play clam pla nbsp 對於text-overflow:ellipsis，文本超出部分顯示...，但要實現這個效果，卻有一些必備條件，如下： div{ overflow:hidden; white-spac

CSS3 漸變背景色各種方向兼容IE9+

tom 百分比默認頁面允許 es2017 指定 die || 背景色，除了純色以外，還能夠使用多種顏色組合成為漸變背景色，使頁面豐富。漸變背景分為兩種： 1、線性漸變； 2、環形漸變；線性漸變線性漸變分為：橫向、縱向、對角漸變三種漸變語法： <lin

vue的挖坑和爬坑之css背景圖樣式終極解決方法

link tro round 源文件 nbsp -i css樣式 -h pat 原問題 #wrapper{ width:100%; height:100%; position:fixed;

【WEB前端系列之CSS】CSS3動畫之Tranition

transform log 值變化 mozilla 大眾適應 int 處理中一前言 css中的transition允許css的屬性值在一定的時間區間內平滑的過渡。這種效果可以在鼠標點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑的以動畫效果改變CSS的屬性值。語法

css3畫圖之大白(●—●)

margin one cdc otto doc ado mes near set <!DOCTYPE html> <html> <head> <title>大白</title>

css3漸變 transition使用方法

style pos clas css3 body chrom tran opera pan <style> div { 　　width:100px; 　　height:100px; 　　background:blue; 　　transition:width

30.QT-漸變之QLinearGradient、 QConicalGradient、QRadialGradient

.com 之間 sets 公共函數 http 邏輯就是停止水平漸變有三種：QLinearGradient、QConicalGradient 、 QRadialGradient 它們都有一個QGradient父類 QGradient父類的常用公共函數有： v

css3漸變

lin ide 關鍵字 dia () 角度距離百分比 line 線性漸變：屬性：linear-gradinet(開始位置角度，起始顏色，終止顏色 )開始位置：漸變開始的位置，屬性值可以為百分比/長度/left、right、top、bottom（可組合使用）角度：漸變終

使用css3漸變實現多個內圓角

<!DOCTYPE html> <html> <body> <div class="iner"></div> <style type="text/css"> .iner{ width: 200px; height:

CSS3——給div設定背景圖片

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0;

PyCharm使用技巧之設定背景圖片

設定的路徑為： File | Settings | Appearance & Behavior | Appearance 選擇Background Image 彈窗的視窗中 Image:點選

CSS3 漸變

如果 blue 指定角度 shape lin nta 一個重復 CSS3 漸變漸變（gradients）可以在兩個或多個指定的顏色之間顯示平穩的過渡。兼容性：IE10+，Chrome26+，FireFox16+，Safari6.1+，Opera12.1+CSS3線性漸變

css3漸變之條紋背景

相關推薦