求救div圆角问题_html/css_WEB-ITnose-html教程-PHP中文网

求救div圆角问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:18:20

原创

1421人浏览过

现在有左上、右上、左下、右下四张圆角切图。
怎么把div背景颜色设置成圆角啊？就是怎么把四张图片放到div的四个角上？求救？

回复讨论(解决方案)

demo this here

<div class="box"> <div class="box-outer">    <div class="box-inner">        <p>sdfsdffffddsfdf</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/ai%E5%BB%BA%E7%AD%91%E7%9F%A5%E8%AF%86%E9%97%AE%E7%AD%94">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b7af235f31d971.png" alt="AI建筑知识问答">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/ai%E5%BB%BA%E7%AD%91%E7%9F%A5%E8%AF%86%E9%97%AE%E7%AD%94">AI建筑知识问答</a>
                            <p>用人工智能ChatGPT帮你解答所有建筑问题</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="AI建筑知识问答">
                                <span>22</span>
                            </div>
                        </div>
                        <a href="/ai/ai%E5%BB%BA%E7%AD%91%E7%9F%A5%E8%AF%86%E9%97%AE%E7%AD%94" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="AI建筑知识问答">
                        </a>
                    </div>
                    </div><div><div>.box{background:url(左下) no-repeat left bottom}.box-outer{background:url(右下)no-repeat right bottom;}.box-inner{background:url(左上) no-repeat  left top;}p{background:url(右上) no-repeat right top;}

登录后复制

图片具体位置可以利用padding的四个方位值调节一下

CSS code?1234567891011121314151617181920

sdfsdffffddsfdf

.box{background:url(左下) no-r……

大侠？在？

现在每个角都是这样的，怎么设置padding呢，比如左下角的我这样设置的
.box{
background:url(左下) no-repeat left bottom；
padding-left：13px；
padding-bottom：13px；
}
这样不可以啊？

你这个图片貌似周边是透明的，大部分都是黑灰色的。那应该让背景色尽量跟这个角图的颜色对比强些。还有 div就不要设置背景色了，让他继承body的背景就好看了

你这个图片貌似周边是透明的，大部分都是黑灰色的。那应该让背景色尽量跟这个角图的颜色对比强些。还有 div就不要设置背景色了，让他继承body的背景就好看了

现在要的是有背景颜色div一个区域，角是圆角的效果，div背景颜色和图片的颜色一致，网上有许多不需要图片的例子，如果用这四个角的图片是怎么设置的

你这个图片貌似周边是透明的，大部分都是黑灰色的。那应该让背景色尽量跟这个角图的颜色对比强些。还有 div就不要设置背景色了，让他继承body的背景就好看了

你给我的代码，四个图是加上了，怎么才能把圆角外的div颜色和body的颜色一致

你div设置背景色了？

你div设置背景色了？

对的设置了

楼主可以起看《CSS彻底设计与研究》这本书，里面讲的比较详细，也可以去看看下这篇文章 CSS圆角制作，希望对楼主有所帮助~

这就不好办了，因为你的那个小图片的角落是透明的，你的div如果设置了背景色，并且跟 body的背景色不一致的话，那这种技术就是失败的

这就不好办了，因为你的那个小图片的角落是透明的，你的div如果设置了背景色，并且跟 body的背景色不一致的话，那这种技术就是失败的

好吧还是好好谢谢你了，没办法设计就是这样。我就按网上说的不要图的那种设计更改吧

border-radius：5px