1. 程式人生 > >div+css背景漸變色程式碼示例

div+css背景漸變色程式碼示例

用CSS使DIV背景顏色漸變,適用於IE和Chrome等瀏覽器。

<style type="text/css"> 
.jbkeleyi{ 
height: 300px; 
width:100px; 
margin:0px auto; 
background-image: -moz-linear-gradient(top, #F00, #000); 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #00FF00), color-stop(1,#FF0000)); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FF00', endColorstr='#FF0000', GradientType='0')
; } </style> </head> <body> 用CSS是div顏色漸變:<br /> <div class="jbkeleyi">從綠到紅<br /><br />keleyi.com</div>

效果圖:

另外多瀏覽器相容程式碼:

FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=#f6f6f8);    /*IE*/

background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb), to(#f6f6f8));/*谷歌*/

相關推薦

div+css背景變色程式碼示例

用CSS使DIV背景顏色漸變,適用於IE和Chrome等瀏覽器。 <style type="text/css"> .jbkeleyi{ height: 300px; width:100px; margin:0px auto; background-image: -mo

Android背景變色(shape,gradient)

com encoding apk order color spa HA ble 逆時針 Android設置背景色可以通過在res/drawable裏定義一個xml,如下: [代碼]xml代碼: 1 <?xml version="1.0"

View背景變色(shape,gradient),shape代替圖片- android

> View背景漸變色(shape,gradient)  shape是用來定義形狀的,gradient定義該形狀裡面為漸變色填充,startColor起始顏色,endColor結束顏色,angle表示方向角度。 Android 顏色漸變(gradient),angle=

css 邊框變色

如上圖所示,用border實現邊框的漸變:   先給div新增右邊框(或者左邊框), border-right: 1px solid #ddd;   用border-image設定漸變 border-image: -webkit-linear-gradient(#fff, #000

View背景變色(shape,gradient),shape代替圖片(減小APP size)- android

shape代替圖片,減小APP size。 > View背景漸變色(shape,gradient)  shape是用來定義形狀的,gradient定義該形狀裡面為漸變色填充,startColor起始顏色,endColor結束顏色,angle表示方向角度。 Andro

css實現變色,從做到右,從上到下

1,從左到右的漸變色: background:#74F195; background:-webkit-linear-gradient(left,#74F195,#C8FF9A); background:-o-linear-gradient(right,#74F195,#

小程式 css 透明變色

  好啦  我決定以後在這記筆記吧哈哈哈哈哈哈~~~~~~~~~重點程式碼為轉載~~ css:   width: 100%;   /* 重點*/   background: #fff;   background: -webkit-linear-gradient(rgba

【乾貨】CSS實現變色,詳解

希望通過這個例子,讓大家以後遇到漸變色的需求時都能從容應對:background: linear-gradient( 角度 ,起始色 0%【起始色遊標】, 結束色 0%【結束色遊標】);兩遊標之間為漸變色,當結束色遊標在起始色遊標之前時,以起始色遊標為準。#34d058 與 

android 背景變色(shape,gradient)

設定背景色可以通過在res/drawable裡定義一個xml,如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">  

div+css+js無縫滾動程式碼

先了解一下物件的幾個的屬性: innerHTML:設定或獲取位於物件起始和結束標籤內的 HTML scrollHeight: 獲取物件的滾動 高度。 scrollLeft:設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrollTop:設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的

1. android 背景變色(shape,gradient)

設定背景色可以通過在res/drawable裡定義一個xml,如下: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/re

css變色背景

background: -webkit-linear-gradient(left, #29c5db , #63abf0); /* Safari 5.1 - 6.0 * background: -o-linear-gradient(right, #29c

div背景顏色設定成變色

小例子: <!doctype html> <html lang="en">  <head>   <meta charset="UTF-8">   <meta name="Generator" content="EditP

JavaScript+CSS+DIV實現下拉菜單示例

element 菜單 clas java java程序 out style ntb tab <!DOCTYPE html> <html> <head> <title>下拉菜單示例</title> &

C# 如何添加PPT背景(純色背景變色背景、圖片背景

orm .so fromfile 技術分享 gre dba ack [] img 概述 我們在創建Powerpoint文檔時,系統默認的幻燈片是空白背景的,很多時候我們需要自定義幻燈片背景,以達到美觀的文檔效果。在下面的示例中將介紹給PowerPoint幻燈片設置背景的方法

UIgradients – 美麗的UI變色分享站 並可轉成CSS代碼

鍵盤 sheji inf 導航 clas 技術分享 工具 更多 截圖 前期我們分享了「如何使用彩色濾鏡創造奇妙的網頁設計」這篇文章,通過漸變彩色濾鏡實現很多漂亮的效果,然而用什麽漸變顏色才好呢?可以看看今天為大家分享的 UIgradients 漸變色分享網站,裏面有很多

CSS:linear-gradient()變色練習筆記

near ima die otto 角度 col 標準 str 圖片 css語法 background: linear-gradient(direction,color-stop1,color-stop2,...); direction:用角度值指定漸變的方向(

CSS變色邊框,解決border設定漸變後,border-radius無效的問題

需求:用css設定漸變邊框 通過border-image來實現漸變色邊框 <div class="content"></div> .content { width: 100px; height: 100px; border:10px

div css CSS標準 background image背景圖片

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

如何用純 CSS 創作一個變色動畫邊框

效果預覽 線上演示 按下右側的“點選預覽”按鈕可以在當前頁面預覽,點選連結可以全屏預覽。 https://codepen.io/comehope/pen/odpRKX 可互動視訊教程 此視訊是可以互動的,你可以隨時暫停視訊,編輯視訊中的程式碼。 請用 chrom