搜索一下，你就知道

< 返回
当前位置：
打印

CSS-自定义渐变背景

创建于2021-03-03
上次更新时间2022-11-22
由hacken
目录

[vc_row el_class=”custombg” mobile_bg_img_hidden=”no” tablet_bg_img_hidden=”no” woodmart_parallax=”0″ woodmart_gradient_switch=”no” row_reverse_mobile=”0″ row_reverse_tablet=”0″ woodmart_disable_overflow=”0″ css=”.vc_custom_1615096357991{padding-top: 200px !important;padding-bottom: 200px !important;}”][vc_column][woodmart_title tag=”p” woodmart_css_id=”603f0b21be471″ title=”背景效果”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text text_larger=”no” woodmart_inline=”no”]


.custombg {
background: #f7ca65;
background: -moz-linear-gradient(-45deg,#f7ca65 0%,#f7ca65 25%,#f1c458 25.1%,#f1c458 79.8%,#f7ca65 80%,#f7ca65 100%);
background: -webkit-linear-gradient(
-45deg
,#f7ca65 0%,#f7ca65 25%,#f1c458 25.1%,#f1c458 79.8%,#f7ca65 80%,#f7ca65 100%);
background: linear-gradient(
135deg
,#f7ca65 0%,#f7ca65 25%,#f1c458 25.1%,#f1c458 79.8%,#f7ca65 80%,#f7ca65 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1c458',endColorstr='#f1c458',GradientType=1 );
}

&nbsp;

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”custombg2″ mobile_bg_img_hidden=”no” tablet_bg_img_hidden=”no” woodmart_parallax=”0″ woodmart_gradient_switch=”no” row_reverse_mobile=”0″ row_reverse_tablet=”0″ woodmart_disable_overflow=”0″ css=”.vc_custom_1615096405030{padding-top: 200px !important;padding-bottom: 200px !important;}”][vc_column][woodmart_title tag=”p” woodmart_css_id=”603f0b21be471″ title=”背景效果”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text text_larger=”no” woodmart_inline=”no”]


.custombg2 {
background: -webkit-linear-gradient(
45deg
,#00bfff 0,#0888cf 15%,navy 100%);
background: -o-linear-gradient(45deg,#00bfff 0,#0888cf 15%,navy 100%);
background: linear-gradient(
45deg
,#00bfff 0,#0888cf 15%,navy 100%);
}

[/vc_column_text][/vc_column][/vc_row][vc_row el_class=”customborder” mobile_bg_img_hidden=”no” tablet_bg_img_hidden=”no” woodmart_parallax=”0″ woodmart_gradient_switch=”no” row_reverse_mobile=”0″ row_reverse_tablet=”0″ woodmart_disable_overflow=”0″ woodmart_css_id=”637cc69bc56fb” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2MzdjYzY5YmM1NmZiIiwic2hvcnRjb2RlIjoidmNfcm93IiwiZGF0YSI6eyJ0YWJsZXQiOnt9LCJtb2JpbGUiOnt9fX0=” woodmart_box_shadow=”no” wd_z_index=”no”][vc_column][woodmart_title tag=”p” woodmart_css_id=”637cc63957606″ title=”边框多颜色” responsive_spacing=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfcmVzcG9uc2l2ZV9zcGFjaW5nIiwic2VsZWN0b3JfaWQiOiI2MzdjYzYzOTU3NjA2Iiwic2hvcnRjb2RlIjoid29vZG1hcnRfdGl0bGUiLCJkYXRhIjp7InRhYmxldCI6e30sIm1vYmlsZSI6e319fQ==”][/vc_column][/vc_row][vc_row][vc_column][vc_column_text text_larger=”no” woodmart_inline=”no”]


border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;

[/vc_column_text][/vc_column][/vc_row]

创建于
上次更新时间