怎么把中间的红色正方形变成圆形

怎么把中间的红色正方形变成圆形

http://img1.sycdn.imooc.com/climg//58bea6c40001183f06030603.jpg

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title></title>

    <link rel="stylesheet" href="">

    <style type="text/css" media="screen">

        div{

            width: 600px;

            height: 600px;

            

            background-color: #abcdef;

            background-size:100px 100px;

            /*transparent设置透明色*/

            background-image: linear-gradient(45deg,red 25%,transparent 25%),

                                  linear-gradient(-45deg,red 25%,transparent 25%),

                                  linear-gradient(45deg,transparent 75%,red 75%),

                                  linear-gradient(-45deg,transparent 75%,red 75%);


                                  

        }

    </style>

</head>

<body>

    <div>

        

    </div>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
小于飞飞 2017-03-08 10:38:40

你好,可以使用gradient结合border-radius知识来实现呦。希望对你有帮助,祝学习愉快。

  • 提问者 m敏 #1
    可以说一下具体怎么实现吗
    2017-03-08 15:40:40
  • 小于飞飞 回复 提问者 m敏 #2
    最方便的方法,将 background-image的渐变,修改成background-image:radial-gradient(circle, red 70%, transparent 70%); 。希望对你有帮助,祝学习愉快,欢迎采纳。
    2017-03-08 19:35:41
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师