Maison  >  Article  >  interface Web  >  求救div圆角问题_html/css_WEB-ITnose

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

WBOY
WBOYoriginal
2016-06-24 12:18:201217parcourir

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


回复讨论(解决方案)

demo this here

<div class="box"> <div class="box-outer">    <div class="box-inner">        <p>sdfsdffffddsfdf</p>    </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

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn