如何使用CSS3中的渐变属性制作棒棒糖图形

 时间:2024-10-14 07:32:08

1、第一步,双击打开HBuilder编辑工具,新建静态页面repeat.html,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形

2、第二步,在<body></body>标签元素插入一个div,id属性值为repeat,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形

3、第三步,设置div的高度和宽度,值为600px;设置repeating-radial-gradient属性,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形

4、第四步,保存代码并预览该静态页面效果,这时会看到类似棒棒糖图形,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形

5、第五步,为div标签元素添加border-radius,设置其半径值,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形

6、第六步,再次保存代码预览页面效果,查看到图形变为棒棒糖图形,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形

7、第七步,再在div下方添加一个div标签元素,作为棒棒糖的手柄,如下图所示:

如何使用CSS3中的渐变属性制作棒棒糖图形如何使用CSS3中的渐变属性制作棒棒糖图形
  • 如何用PS软件画一个靠背的椅子?
  • 在Indesign2018中如何更改参考线颜色
  • ps软件如何使用叠加功能
  • PS如何设计蓝天白云小草卡通简笔画绘本插图
  • InDesign怎么画箭头
  • 热门搜索
    李斯怎么死的 丝蓓绮洗发水怎么样 瑞银信pos机怎么样 青岛黄海学院怎么样 狗狗吐了怎么办 咽喉炎干咳怎么办 马眼棒怎么用 缺钙怎么办 肺结节是怎么回事严重吗 结肠炎怎么办