css - jsx 中的线性渐变 css

Question

我从某个地方下载了一个模板，并试图将其转换为一个 React 组件，但我遇到的一件事是，我无法在这个 css 中获得 linear-gradient 的用途以及如何修改它以在 jsx 内联样式中工作。

let component = React.createClass({
  render: function() {
    return (

      <div className="container" style={{boxSizing: 'border-box', width: 600, height: 340, margin: '0 auto', position: 'relative', WebkitPerspective: 1000, MozPerspective: 1000, perspective: 1000, MozTransform: 'perspective(1400px)', msTransform: 'perspective(1400px)', WebkitTransformStyle: 'preserve-3d', MozTransformStyle: 'preserve-3d', transformStyle: 'preserve-3d', WebkitPerspectiveOrigin: 'right', MozPerspectiveOrigin: 'right', perspectiveOrigin: 'right'}}>
        <div className="card" style={{boxSizing: 'border-box', width: 600, height: 340, boxShadow: '0 27px 55px 0 rgba(0, 0, 0, .7), 0 17px 17px 0 rgba(0, 0, 0, .5)', position: 'relative', WebkitTransform: 'rotate(0deg)', MozTransform: 'rotate(0deg)', msTransform: 'rotate(0deg)', transform: 'rotate(0deg)', WebkitTransformOrigin: '100% 0%', MozTransformOrigin: '100% 0%', msTransformOrigin: '100% 0%', transformOrigin: '100% 0%', WebkitTransformStyle: 'preserve-3d', MozTransformStyle: 'preserve-3d', transformStyle: 'preserve-3d', transition: '.8s ease-in-out'}}>
          <div className="front" style={{boxSizing: 'border-box', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', WebkitBackfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', display: 'flex', WebkitJustifyContent: 'center', justifyContent: 'center', WebkitAlignItems: 'center', alignItems: 'center', zIndex: 2, WebkitTransform: 'rotateY(0deg)', MozTransform: 'rotateY(0deg)', msTransform: 'rotateY(0deg)', transform: 'rotateY(0deg)'}}>
            <div className="logo" style={{boxSizing: 'border-box', width: 200, height: 200, position: 'relative', background: 'linear-gradient(45deg, #F5AF69 50%, #F4EED7 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%), 
  linear-gradient(#FC5135 50%, #4E203C 50%),
  linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%),
  linear-gradient(90deg, #FC5135 50%, #4E203C 50%),
  linear-gradient(45deg, #FC5135 50%, #F5AF69 50.9%)', backgroundSize: '50px 50px, 100px 50px, 50px 50px, 200px 100px, 50px 50px, 100px 50px, 50px 50px', backgroundRepeat: 'no-repeat', backgroundPosition: '0 0, 50px 0px, 150px 0, 0 50px, 0 150px, 50px 150px, 150px 150px'}}><span style={{boxSizing: 'border-box', display: 'block', background: '#4E203C', width: 29, height: 32, position: 'absolute', top: '99.5px', left: 130, borderRadius: '0 50% 50% 0'}} /></div>
          </div>
          <div className="back" style={{boxSizing: 'border-box', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', background: 'white', WebkitBackfaceVisibility: 'hidden', MozBackfaceVisibility: 'hidden', backfaceVisibility: 'hidden', WebkitTransform: 'rotateY(-180deg)', MozTransform: 'rotateY(-180deg)', msTransform: 'rotateY(-180deg)', transform: 'rotateY(-180deg)', fontFamily: '"Arimo", sans-serif'}}>
            <h1 style={{boxSizing: 'border-box', color: '#FC5135', textTransform: 'uppercase', fontWeight: 400, lineHeight: 1, marginTop: 110, textAlign: 'center', fontSize: 40}}>Helen Parker<span style={{boxSizing: 'border-box', color: '#4E203C', display: 'block', fontSize: '.45em', letterSpacing: 3}}>design <i style={{boxSizing: 'border-box', fontStyle: 'normal', textTransform: 'none', fontFamily: '"Playfair Display", serif'}}>&amp;</i> photography</span></h1>
            <ul style={{boxSizing: 'border-box', margin: 0, width: '100%', listStyle: 'none', position: 'absolute', bottom: 30, left: 0, padding: '0 1%'}}>
              <li style={{boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'}}>+1-111-111-11-11</li>
              <li style={{boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'}}>my-email@email.com</li>
              <li style={{boxSizing: 'border-box', width: '31.3333333333%', margin: '0 1%', float: 'left', padding: 10, border: '2px solid #FC5135', borderRadius: 4, position: 'relative', textAlign: 'center', color: '#4E203C'}}>my-site.com</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});

Answer 1

如果你想使用内联样式，你可以这样做:

<div style={{backgroundImage: 'linear-gradient(to right, #439bfd, #73b3fb)'}}...