m5k1umn 发表于 2024-6-30 08:20:00

聊一聊CSS3的渐变——gradient


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">关于渐变</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">时下，渐变（gradient）效果在页面设计中<span style="color: black;">已然</span>变得越来越<span style="color: black;">平常</span>了。<span style="color: black;">况且</span><span style="color: black;">此刻</span>的CSS3<span style="color: black;">针对</span>渐变的支持<span style="color: black;">亦</span><span style="color: black;">已然</span>足够的丰富了。虽然<span style="color: black;">咱们</span>可能<span style="color: black;">运用</span>过CSS3中的line-gradient属性或radial-gradient属性，但其实CSS3中的渐变功能比<span style="color: black;">咱们</span>想象的要强大的多，加以利用会实现<span style="color: black;">非常多</span>有趣好玩的东西。本文就来讨论CSS3中的渐变。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-e62dc524e8e706cc37805dc1d72e1704_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>taobao首页的按钮和导航栏都<span style="color: black;">运用</span>了css渐变<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">基本</span>语法</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>你之前<span style="color: black;">运用</span>过CSS3的渐变，<span style="color: black;">针对</span>下面的CSS代码<span style="color: black;">必定</span>有所<span style="color: black;">认识</span>：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"gradient_bg"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">gradient_bg</span> <span style="color: black;">{</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round-image</span><span style="color: black;">:</span> <span style="color: black;">linear-gradient</span><span style="color: black;">(</span><span style="color: black;">gold</span><span style="color: black;">,</span> <span style="color: black;">#FF837E</span><span style="color: black;">);</span>
      <span style="color: black;">height</span><span style="color: black;">:</span> <span style="color: black;">84</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">width</span><span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">他的运行结果如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic4.zhimg.com/80/v2-f96500a3db760186c83d6bc0e2bf9967_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>这是一个由上到下、由金色到粉色的渐变色块<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">linear-gradient()<span style="color: black;">办法</span>的语法看上去还是很清晰的——从某个颜色渐变到另一个颜色。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">然则</span><span style="color: black;">倘若</span>要实现下面的几种渐变效果该<span style="color: black;">怎样</span>做呢？</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-c38f220727511c14e1bcadd6c29fe069_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>这个<span style="color: black;">是由于</span>左到右渐变的色块，并且渐变过程只<span style="color: black;">出现</span>在中间一小部分内<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-e8278c6bf96c04436bb7cc166e8c7fc1_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>这个<span style="color: black;">是由于</span>中心向外渐变的色块




流星的美 发表于 2024-8-29 12:50:00

外链发布社区 http://www.fok120.com/

流星的美 发表于 2024-9-3 16:17:15

你的话语如春风拂面，温暖了我的心房，真的很感谢。

m5k1umn 发表于 2024-10-7 11:44:36

楼主果然英明！不得不赞美你一下！

b1gc8v 发表于 2024-10-20 08:24:56

论坛的成功是建立在我们诚恳、务实、高效、创新和团结合作基础上，我们要把这种精神传递下去。

nykek5i 发表于 2024-10-29 05:14:14

真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。
页: [1]
查看完整版本: 聊一聊CSS3的渐变——gradient