CSS 中使用徑向漸變實現卡券效果_CSS教程_CSS_網頁制作

來源:腳本之家  責任編輯:小易  

在 Photoshop中使用漸變工具,給背景層填充徑向漸變,需要先點選背景層使之成為當前層,然后在“漸變工具”中選擇“徑向漸變”,選擇方向填充即可。以Photoshop CS5為示例,步驟如下:1、運行Photoshop CS5,并打開一張示例圖片,圖片帶有背景層。2、點選“漸變工具”。3、點選“徑向漸變”工具。4、點擊背景層,使之成為當前層。5、選擇漸變顏色。6、選擇漸變方向。7、填充,即可完成給背景層填充徑向漸變的目的www.anxorj.tw防采集請勿采集本網。

前幾天,同事接到一個積分商城項目,其中有一個卡券兌換禮品功能。我想了一會沒什么好的思路,就忙自己的項目去了。但想到以后自己可能也會遇到類似的需求,所以周末學習整理了下幾種卡券效果的實現。

ie9以上版本直接支持css3漸變 既然微軟家的ie9以上瀏覽器往css3更不過無論ie9+的瀏覽器是否支持 濾鏡(filter)這個東西,你都可以用css3的漸變實現,濾鏡實現的漸變你只給ie9以下版本準備就行了。

常見的卡券樣式如下:

徑向漸變綜合效果演示:background:-moz-radial-gradient(30px 30px,circle farthest-corner,#58ff00 0%,rgba(222,255,0,0)30%),-moz-radial-gradient(50px 70px,circle farthest-corner,#F30 0%,rgba(255

 

CSS 漸變 是在 CSS3 瀏覽器支持兩種類型的漸變:線性漸變(linear),通過 linear-gradient 函數定義,以及 徑向漸變(radial),通過 radial-gradient 函數定義 學習更多css3漸變可以到實,戰,幫

使用偽元素實現(Less 版本)

針對不同瀏覽器有不同的前綴,基本還是相似的,下面的意思是線性漸變,從上方開始,從黑色漸變到白色 webkit-linear-gradient(top,#000,#fff);moz-linear-gradient(top,#000,#fff);o-linear-

ticket.less

線條有個方法lineGradientStyle()是專門用于漸變填充的,可惜在百度上,一發代碼,貼子就廢了,因此無法發代碼給你?梢愿嬖V你的是,結合Matrix類可以實現這樣的效果。

.ordinary-mixins-ticket-horizontal(@width,@height,@r,@top, @color) { position: relative; box-sizing: border-box; padding: 0 @r; width: @width; height: @height; background-clip: content-box; background-color: @color; &::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: @r + 1px; height: 100%; background: radial-gradient(@r circle at left @top, transparent @r, @color @r + 1px); } &::after { position: absolute; top: 0; right: 0; content: ""; display: block; //這里的 @r + 1px 是為了避免某些百分百比縮放頁面時,出現空隙 width: @r + 1px; height: 100%; //這里的 @r + 1px 是為了防止出現鋸齒 background: radial-gradient(@r circle at right @top, transparent @r, @color @r + 1px); }}.parent { .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);}.child { line-height: 200px;}

App.js

import React from 'react';import './App.css';import './ticket.less';function App() { return ( <div className="App" style={ { display: "flex", justifyContent: "center", alignItems: "center", height: 600 } }> <div className={'parent'}> <div className="child">666</div> </div> </div> );}export default App;

升級版樣式一(Less 版本)

.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) { width: @width; height: @height; // @left - 1px 是為了避免某些百分百比縮放頁面時,出現空隙 // @r + 1px 是為了防止出現鋸齒 // 51% 是為了防止出現元素中間會有一小段空白區域的情況 background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat, radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat, radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat, radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) { width: @width; height: @height; // @left + 1px 是為了避免某些百分百比縮放頁面時,出現空隙 // @r + 1px 是為了防止出現鋸齒 // 51% 是為了防止出現元素中間會有一小段空白區域的情況 background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) right top ~'/' (@width - @left) 51% no-repeat, radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) right bottom ~'/' (@width - @left) 51% no-repeat, radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) left top ~'/' @left + 1px 51% no-repeat, radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) left bottom ~'/' @left + 1px 51% no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.parent { .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);}.child { line-height: 200px;}

升級版樣式一(Scss 版本)

@mixin mixins-ticket-vertical($width, $height, $r, $left, $l-color, $r-color) { width: $width; height: $height; // $left - 1px 是為了避免某些百分百比縮放頁面時,出現空隙 // $r + 1px 是為了防止出現鋸齒 // 51% 是為了防止出現元素中間會有一小段空白區域的情況 background: radial-gradient(circle at left top, transparent $r, $l-color $r + 1px) $left - 1px top / 100% 51% no-repeat, radial-gradient(circle at left bottom, transparent $r, $l-color $r + 1px) $left - 1px bottom / 100% 51% no-repeat, radial-gradient(circle at right top, transparent $r, $r-color $r + 1px ) -($width - $left) top / 100% 51% no-repeat, radial-gradient(circle at right bottom , transparent $r, $r-color $r + 1px ) -($width - $left) bottom / 100% 51% no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.parent { @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);}.child { line-height: 200px;}

升級版樣式二(Less 版本)

.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) { width: @width; height: @height; background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat, radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat, radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat, radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) { width: @width; height: @height; background: radial-gradient(circle at left top, transparent @r, @r-color @r + 1px) left bottom ~'/' 51% (@height - @top) no-repeat, radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left top ~'/' 51% @top + 1px no-repeat, radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right bottom ~'/' 51% (@height - @top) no-repeat, radial-gradient(circle at right bottom, transparent @r, @l-color @r + 1px) right top ~'/' 51% @top + 1px no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));}.parent { .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);}.child { line-height: 200px;}

升級版樣式三(Less 版本)

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) { width: @width; height: @height; background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) left @top - 1px ~'/' 51% 100% no-repeat, radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) left -(@height - @top) ~'/' 51% 100% no-repeat, radial-gradient(circle at right top, transparent @r, @r-color @r + 1px) right @top - 1px ~'/' 51% 100% no-repeat, radial-gradient(circle at right bottom, transparent @r, @r-color @r + 1px) right -(@height - @top) ~'/' 51% 100% no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); &::after { position: absolute; left: 0; right: 0; top: @top; margin: auto; content: ''; width: calc(~"100%" - 2*@r - @border-offset); border-top: 1px dashed @border-color; }}.parent { .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28); //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);}.child { line-height: 200px;}

升級版樣式四(Less 版本)

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) { width: @width; height: @height; // @left - 1px 是為了避免某些百分百比縮放頁面時,出現空隙 // @r + 1px 是為了防止出現鋸齒 // 51% 是為了防止出現元素中間會有一小段空白區域的情況 background: radial-gradient(circle at left top, transparent @r, @l-color @r + 1px) @left - 1px top ~'/' 100% 51% no-repeat, radial-gradient(circle at left bottom, transparent @r, @l-color @r + 1px) @left - 1px bottom ~'/' 100% 51% no-repeat, radial-gradient(circle at right top, transparent @r, @r-color @r + 1px ) -(@width - @left) top ~'/' 100% 51% no-repeat, radial-gradient(circle at right bottom , transparent @r, @r-color @r + 1px ) -(@width - @left) bottom ~'/' 100% 51% no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2)); &::after { content: ''; position: absolute; top: 0; right: [email protected]; width: @sm-r; height: 100%; background-image: radial-gradient(circle at @sm-r, transparent @sm-r, @r-color @sm-r + 1px); //background-size: @sm-r; background-size: @sm-r @sm-offset; }}.parent { .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);}.child { line-height: 200px;}

注意事項

// ticket.less//background: radial-gradient(circle at top right, transparent @r, @lcolor 0) -(@width - @left) top ~'/' 100% 55% no-repeat;// 將上面的這行代碼拆解如下://background-image: radial-gradient(circle at top right, transparent @r, @lcolor 0);//background-position:-(@width - @left) top ;//background-size:100% 55% ;//background-repeat: no-repeat;/*注意:這里先是有 50px 的透明區域,緊接著第二個區域設置了 0 ,可以理解為從這里開始重新設置樣式區間*//*background: radial-gradient(circle at top right, transparent 50px, red 0, #66a8ff 50%);*//*在Chrome下,如果兩個區域之間顏色直接以 0 偏差過渡,會有比較嚴重的鋸齒*//*background: radial-gradient(10px at left,transparent 50%,#F6327C 50%);*//*background: radial-gradient(10px at left,transparent 50%,#F6327C 55%);*//*加陰影效果*//*filter: drop-shadow(2px 2px 2px rgba(0,0,0,.2));*//*多個徑向漸變累加*//*background: radial-gradient(50px 100px ellipse, transparent 40px, yellow 41px, red 49px, transparent 50px),radial-gradient(30px circle, red, red 29px, transparent 30px);*/

總結

到此這篇關于CSS 中使用徑向漸變實現卡券效果的文章就介紹到這了,更多相關css 徑向漸變實現卡券效果內容請搜索真格學網以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持真格學網!

這么復雜,估計做出來人都死了內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • 解決css樣式沖突的幾個辦法(小結)
  • css 中使用徑向漸變實現卡券效果
  • css3里box-shadow屬性的使用方法示例詳解
  • css垂直居中的另類實現代碼詳解(不走尋常路)
  • css viewport 單位 實現快速布局
  • css布局兩個button在同父標簽中左右兩側分布的方法
  • css變量對js交互組件開發帶來的提升與變革示例代碼詳解
  • 完美解決webpack打包css背景圖片路徑問題
  • 純css實現選中商品后右下角顯示√號功能
  • css 實現動態二級菜單
  • 如何使用css徑向漸變實現這圖的混合效果
  • 在PS使用漸變工具,給背景層填充徑向漸變
  • 怎樣用css實現網頁背景顏色漸變
  • 線性漸變和徑向漸變有什么區別?
  • 請問各位高手一個關于利用css使ie實現漸變效果的問題
  • CSS3中如何實現漸變效果
  • css3漸變怎么實現?
  • css3 漸變怎么實現?
  • 在AS3.0中如何用代碼實現線條徑向漸變效果?請高手解答
  • PS里面的漸變色徑向漸變為什么只能一側深我想周圍深,中間淺
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全主頁網頁制作csscss教程css徑向漸變卡券css 實現動態二級菜單css教程css3div+css教程web標準教程瀏覽器兼容教程css布局實例css控制ul li 的樣式詳解(推薦)html設置超鏈接字體顏色和點擊后的字體顏色div水平垂直居中的完美解決方案css設置各種中文字體如雅黑、黑體、宋體、楷體等等css 文本字體顏色設置方法(css color)css 漂亮搜索框美化代碼css自定義select下拉選擇框的樣式(不用其他標簽模擬)css圓角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行縮進兩個文字css3里box-shadow屬性的使用方法示例詳解css垂直居中的另類實現代碼詳解(不走尋常路)css viewport 單位 實現快速布局css布局兩個button在同父標簽中左右兩側分布的方法css變量對js交互組件開發帶來的提升與變革示例代碼詳完美解決webpack打包css背景圖片路徑問題純css實現選中商品后右下角顯示√號功能css 實現動態二級菜單flex移動布局中單行和雙行布局的區別及使用詳解css實現導航固定的、左右滑動的滾動條制作方法
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载