文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
html - 这种图形如何用css3写
某草草
某草草 2017-05-24 11:32:06
[CSS3讨论组]
0 4 1060
举报

某草草
某草草

全部回复(4)
为情所困
为情所困2017-05-24 11:34:06 4楼

css3里面有个名为倒角的干活

赞 +0
添加回复
PHP中文网
PHP中文网2017-05-24 11:34:06 3楼 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<style type="text/css">
 *,body{ margin: 0; padding: 0; background: #fff; border: none; }
 .bg{width: 500px; height: 500px; background: rgba(253,181,43,1); padding: 12px; }
 .bg .write_box{ width: 500px; height: 250px; position: relative;background: #fff; overflow: hidden; }
 .bg .write_box .round{ width: 40px; height: 40px; background: rgba(253,181,43,1); position:absolute;  border-radius: 100% }
 .bg .write_box .lft{ left: -20px;   }
 .bg .write_box .rgh{ right: -20px; }
 .bg .write_box .botm{ bottom: -20px; }
 .bg .write_box .tp{ top: -20px; }
</style> 
    
    <p class="bg">
      <p class="write_box">
         <p class="round lft tp"></p>
         <p class="round rgh tp"></p>
         <p class="round lft botm"></p>
         <p class="round rgh botm"></p>
      </p>
      
      <p class="write_box">
         <p class="round lft tp"></p>
         <p class="round rgh tp"></p>
         <p class="round lft botm"></p>
         <p class="round rgh botm"></p>
      </p>
    </p>
</body>
</html>
赞 +0
添加回复
巴扎黑
巴扎黑2017-05-24 11:34:06 2楼

简单来讲，你需要通过 圆形p元素的border-radius 和 包裹的overflow来实现，至于更深的橘色应该是阴影

赞 +0
添加回复
習慣沉默
習慣沉默2017-05-24 11:34:06 1楼

真是不好意思，我一直用的firefox，没想到它对于radial-gradient和chrome还是有不同的。也是我自己理解不够。

我又修改了下面的链接。

===============

使用了CSS3变量来控制半径大小，暂时想不到更简单的办法了
在不向下不兼容的路上越走越远...

DEMO-New

===================================

详细请看DEMO，纯CSS3实现，没有添加额外标记，虽然我感觉可扩展性不高，不过继续改善应该还是可以投入生产中的。

CSS3的魔法还有很多，不断地深入思考，会想到很多有趣的功能。正如《CSS揭秘》作者那样。

DEMO

赞 +0
添加回复
专题推荐
更多>
热门话题
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部