怎样用css写线条左右渐变？ 怎样用css实现一个图片的颜色从左至右的渐变
CSS\u6e10\u53d8\uff0c\u5199\u7684\u4ee3\u7801\u662f\u8fd9\u6837\uff0c\u4f46\u662f\u7ed3\u679c\u662f\u6709\u7ebf\u6761\uff0c\u600e\u4e48\u5f04\uff1f\u4e0d\u8981\u7ed9*\u8bbe\u7f6e\u8fd9\u6837\u7684\u6837\u5f0f\uff0c\u56e0\u4e3a\u8fd9\u610f\u5473\u7740\u6240\u6709\u6807\u7b7e\u90fd\u662f\u8fd9\u4e2a\u6837\u5f0f\u7684\uff0c\u800c\u8fd9\u4e0d\u53ef\u907f\u514d\u4f1a\u76f8\u4e92\u5e72\u6270\u7684\u3002\u5982\u679c\u4f60\u7684\u76ee\u7684\u662f\u60f3\u8ba9\u80cc\u666f\u6e10\u53d8\uff0c\u53ea\u8981\u7ed9body\u8bbe\u7f6e\u8fd9\u4e2a\u6837\u5f0f\u5373\u53ef\u3002
\u6bd4\u5982\uff1a
.sss{ filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#000000', endColorStr='#666666', gradientType='1')}
\u5176\u4e2dgradientType='1' \u7684\u503c\u53ef\u4ee5\u6539\u7684\u30020\uff0c1\uff0c2\u4efb\u610f\u4f60\u81ea\u5df1\u54af\u5c31\u662f\u6c34\u5e73\uff0c\u5782\u76f4\u4e4b\u7c7b\u7684\u4e0d\u540c\u3002
\u4e0d\u5efa\u8bae\u7528\u6ee4\u955c\u6765\u505a\u6e10\u53d8\uff0c\u56e0\u4e3a\u50cfFIREFOX\u90a3\u4e9b\u6838\u5fc3\u7684\u6d4f\u89c8\u5668\u662f\u65e0\u6cd5\u663e\u793a\u51fa\u4f60\u7684\u6e10\u53d8\u5f97\uff0c\u5305\u62ecNETSCAPE,OPEAR\u7b49\u90fd\u6ca1\u529e\u6cd5\uff0c\u8981\u6e10\u53d8\u7684\u8bdd\u5e94\u8be5\u7528\u56fe\u7247\u76f4\u63a5\u505a\u597d\u518d\u8d34\u4e0a\u53bb\u3002
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.demo{
width:200px;
height:10px;
background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(left, rgb(80,80,255,0.2) , #fff); /* Firefox 3.6 - 15 */
background: linear-gradient(to left, rgb(80,80,255,0.2) , #fff); /* 标准的语法 */
}
</style>
</head>
<body>
<div class="demo" ></div>
</body>
</html>
很多时候在开发网页的时候，可能因为一些原因需要为边框设置颜色渐变，那么该如何设置颜色边框渐变？本篇文章将为大家介绍使用css3设置边框颜色渐变的方法。
我们设置边框颜色渐变时可以用到css3中的属性是border-image或者border-colorcss3边框颜色渐变，那么两个属性如何设置边框颜色渐变。
我们首先来看border-image属性实现的简单css3边框颜色渐变的例子：
第一种：border-image设置边框颜色渐变示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
border:10px solid #ddd;
border-image: -webkit-linear-gradient(#F80, #2ED) 20 20;
border-image: -moz-linear-gradient(#F80, #2ED) 20 20;
border-image: -o-linear-gradient(#F80, #2ED) 20 20;
border-image: linear-gradient(#F80, #2ED) 20 20;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css3边框颜色渐变效果如下：
说明：上述代码中你会发现给border-image加了linear-gradient，这是为什么呢？因为若是你不加linear-gradient就不会有线性渐变的效果。（关于border-image有很多的用法，你可以参考css手册。）
绛旓細 .demo{ width:200px;height:10px;background:-webkit-linear-gradient(left, rgb(80,80,255,0.2) , #fff) /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left, rgb(80,80,255,0.2) , #fff); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(l...
绛旓細left:璁剧疆宸﹁竟涓哄緞鍚戞笎鍙樺渾蹇冪殑妯潗鏍囧笺 right:璁剧疆鍙宠竟涓哄緞鍚戞笎鍙樺渾蹇冪殑妯潗鏍囧銆 top:璁剧疆椤堕儴涓哄緞鍚戞笎鍙樺渾蹇冪殑绾靛潗鏍囧笺 bottom:璁剧疆搴曢儴涓哄緞鍚戞笎鍙樺渾蹇冪殑绾靛潗鏍囧笺 <shape> 纭畾鍦嗙殑绫诲瀷 circle:鎸囧畾鍦嗗舰鐨勫緞鍚戞笎鍙 ellipse:鎸囧畾妞渾褰㈢殑寰勫悜娓愬彉銆 <extent-keyword> circle | ellipse 閮芥帴鍙楄鍊间綔涓 size銆
绛旓細绗竴涓弬鏁拌〃绀虹嚎鎬ф笎鍙樼殑鏂瑰悜锛宼op鏄粠涓婂埌涓嬨乴eft鏄粠宸﹀埌鍙筹紝濡傛灉瀹氫箟鎴恖eft top锛岄偅灏辨槸浠庡乏涓婅鍒板彸涓嬭銆傜浜屼釜鍜岀涓変釜鍙傛暟鍒嗗埆鏄捣鐐归鑹插拰缁堢偣棰滆壊銆備綘杩樺彲浠ュ湪瀹冧滑涔嬮棿鎻掑叆鏇村鐨勫弬鏁帮紝琛ㄧず澶氱棰滆壊鐨勬笎鍙樸傜嚎鎬娓愬彉浣跨敤from()浠ュ強to()鏂规硶鎸囧畾杩囨浮棰滆壊鐐:background:-webkit-gradient(lin...
绛旓細棣栧厛锛宭inear-gradient()鍑芥暟鏄綘鐨勮皟鑹叉澘涓婄殑绗竴鎶婂埛瀛愩傚畠鑳界粯鍒跺嚭浠庝竴绔埌鍙︿竴绔殑绾挎娓愬彉锛屽彧闇璁惧畾娓愬彉鐨勬柟鍚戙佽捣濮嬪拰缁撴潫鑹插僵銆傛兂瑕佸彉骞昏帿娴嬬殑鑳屾櫙杩囨浮锛熻瘯璇曡繖鏍风殑浠ｇ爜绀轰緥锛歜ackground: linear-gradient(to right, red, blue); 杩欏氨鍍忓湪鐢诲竷涓婅交杞讳竴鎶癸紝绾㈣壊娓愬彉鑷宠摑鑹诧紝瑙嗚鏁堟灉鎯婅壋銆傝岀...
绛旓細鍙渶瑕佹妸銆恖eft銆戞敼鎴愩恡op銆戝氨鍙互浜銆5浠庡彸鍚戝乏娓愬彉灏辨槸鎶婃柟鍚戞敼涓恒恟ight銆6浠庝笅鍚戜笂鐩镐俊澶у涔熼兘鏄庣櫧浜嗗惂锛屾敼鎴愩恇ottom銆戝氨鍙互鍟︺7濡傛灉鎴戜滑鎯宠娓愬彉鑹叉敼鎴45搴︽枩鐫娓愬彉锛屽氨鎶婃柟鍚戝兼敼涓恒45deg銆戝氨鍙互鍜紝45灏辨槸45搴︼紝涓句竴鍙嶄笁锛屾兂瑕佸叾浠栫殑鍊炬枩搴︽笎鍙樼洿鎺ユ敼鏁板煎氨鍙互浜嗗摝銆
绛旓細娓愬彉鏍峰紡鏂囦欢鐨勬墿灞曞悕锛熸牱寮忔枃浠剁殑鎵╁睍鍚嶏細.css dw璁剧疆娓愬彉鑹蹭唬鐮侊紵鍦╞ody涓坊鍔犱竴涓爣绛撅紝瀹氫箟涓涓猚ss鏍峰紡 background:-webkit-linear-gradient(left,#ff5000,#ff9000)no-repeat;淇濆瓨骞朵笖鍒锋柊椤甸潰灏卞彲浠ヤ簡 鎬庝箞璁剧疆缃戦〉鑳屾櫙涓烘笎鍙樿壊锛1銆佹墦寮html寮鍙戝伐鍏凤紝鏂板缓涓涓猦tml鏂囦欢鍦╤tml浠ｇ爜椤甸潰鍒涘缓涓涓猵>骞...
绛旓細css瀛椾綋娓愬彉锛宑ss鏄鎬庝箞瀹氫箟瀛椾綋鏈夋笎鍙橀鑹茬殑锛1銆傚垱寤轰竴涓柊鐨刪tml鏂囦欢锛屽苟灏嗗叾鍛藉悕涓簍est.html銆2.鍦╰est.html鏂囦欢涓紝浣跨敤瀛椾綋鏍囩鍒涘缓涓夎鏂囨湰锛屽苟浠ヤ笉鍚岀殑鏂瑰紡璁剧疆瀛椾綋鐨勯鑹层3.鍦╰est.html鏂囦欢涓紝閫氳繃棰滆壊灞炴х洿鎺ュ湪瀛椾綋鏍囩涓婅缃瓧浣撻鑹层備緥濡傦紝灏嗗瓧浣撻鑹茶缃负绾㈣壊銆4.鍦╰est.html鏂囦欢涓紝...
绛旓細CSS3 娓愬彉锛坓radients锛夊彲浠ヨ浣犲湪涓や釜鎴栧涓寚瀹氱殑棰滆壊涔嬮棿鏄剧ず骞崇ǔ鐨勮繃娓°侰SS3 瀹氫箟浜嗕袱绉嶇被鍨嬬殑娓愬彉锛坓radients锛夛細绾挎ф笎鍙橈紙Linear Gradients锛- 鍚戜笅/鍚戜笂/鍚戝乏/鍚戝彸/瀵硅鏂瑰悜涓庡緞鍚戞笎鍙橈紙Radial Gradients锛- 鐢卞畠浠殑涓績瀹氫箟 绾挎ф笎鍙橈細3.1銆佷粠涓婂埌涓嬬殑绾挎ф笎鍙橈細grad { background: -webkit-...
绛旓細鍥炵瓟锛氬弬鑰冭繖涓惂銆俢olorzilla.com/gradient-editor/璇风敤鏀寔CSS3鐨刡rowser鏌ョ湅銆
绛旓細閭ｅ氨鍙兘鑷繁瑙ｅ喅浜嗐傛墍浠ョ敤涓婁釜鏂规硶鑱旀兂鍒颁簡绾挎娓愬彉锛坙inear-gradient锛CSS .line li{ border: none; background-image: -webkit-linear-gradient(#222 50%,transparent 50%); background-image: -moz-linear-gradient(#222 50%,transparent 50%); background-image: -o-linear-gradient(#...
